faire des éléments de niveau de bloc des liens cliquables

Question

J'ai le problème de conception suivant. J'ai une liste d'éléments et je veux faire de chacun des premiers li un lien cliquable. J'ai essayé d'ajouter un lien dans chaque li, ce qui en fait un élément de niveau bloc et le positionne en absolu, mais cela ne fonctionne pas parce que le parent et tous les li sont laissés à gauche pour la mise en page. Toute aide serait appréciée, merci

<ul style='float:left;width:x> 

    <li> 
     <ul> 
     <li>Title</li> 
     <li>Description</li> 
     </ul> 
    </li> 

    <li> 
     <ul> 
     <li>Title</li> 
     <li>Description</li> 
     </ul> 
    </li> 

    <li> 
     <ul> 
     <li>Title</li> 
     <li>Description</li> 
     </ul> 
    </li> 

</ul> 

Answer 1

Si le parent li a position: relative, vous pouvez placer des choses absolument à l'intérieur sans déconner avec la façon dont le parent flotte autour.

Une autre solution, quelque peu inélégante, consisterait à ajouter un événement onclick à chacun des li parents, et utiliser JavaScript pour changer l'URL. De plus, ajoutez cursor: pointer à votre CSS pour qu'il ressemble à un lien. Mais comme je l'ai dit, ce n'est pas élégant.

Answer 2

Avez-vous pensé à jQuery en option? Ce n'est probablement pas la meilleure solution, mais cela fonctionnerait. donc je rig quelque chose comme ceci:

$("ul li:first-child").bind('click',function(){ 
    // click event here. 
    alert("Boom!"); 
    $(this).find("li a").trigger('click'); 
}); 

et je voudrais avoir votre look code comme ceci:

<ul> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
     <li><a href="#">title</a></li> 
     <li>description</li> 
     </ul> 
    </li> 
</ul> 

Answer 3

Mettre les liens dans la li et utiliser display:block. Ne les positionnez pas absolument.