11521 sujets

JavaScript, DOM et API Web HTML5

[JQuery]SlideDown

Bonjour, je ne m'y connais pas vraiment voir quasiment pas en JS et JQuery et j'ai un probleme

J'ai ça : upload/1510663882-67776-capture.png

Et en gros je souhaite faire que lorsque la souris passe dessus , affiche/déroule ça juste en dessous : upload/1510663944-67776-capture.png

Ils doivent etre des liens cliquables.

J'ai donc utilisé hover pour le passage de souris et SlideDown/SlideUp pour afficher/cacher le tableau
Mais mon problême c'est que les liens ne sont pas cliquable ....

HTML :
<div class="container themes" id="divListeTheme">
    <div class="row ligne_theme">
        <div class="col-md-3 col-xs-3 theme">
                <ul>
                    <li>
                        <div class="col-md-3 col-xs-3">
                            <img src="http://placehold.it/50x50" class="img_theme">
                        </div>
                        <div class="col-md-8 col-xs-8 centre">
                            <p class="langues">A - LANGUES</p>
                        </div>
                        
                        <table>
                        <a href="index.php"><tr><td>A0</td><td>Allemand</td></tr></a>
                        <a href="index.php"><tr><td>A2</td><td>Anglais</td></tr></a>
                        <a href="index.php"><tr><td>A4</td><td>Espagnol</td></tr></a>
                        <a href="index.php"><tr><td>A6</td><td>Français</td></tr></a>
                        <a href="index.php"><tr><td>A8</td><td>Chinois</td></tr></a>
                        <a href="index.php"><tr><td>A9</td><td>Autres</td></tr></a>
                        </table>
                    </li>


JQuery : 
$(function(){
    
    $('li').css({cursor:'pointer'});
    
    $('table').hide();
    
    $('#divListeTheme li').hover(function(){
        
        var element = $(this).children('table');
        
        if(element.is(":hidden")){
            
            element.slideDown("slow");
            
        }
        else
        {
            
            element.slideUp("slow");
        
        }
    })
})
Salut,

c'est parce que un tr dans un href ne fonctionne pas, pour ça tu as deux solutions :

avec du javascript:

<tr onclick="document.location = 'links.html';">



ou avec les <a> mais à l'intérieur.

<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>


dans ce cas il faut également utiliser le css pour "remplir" la ligne.

table tr td a {
    display:block;
    height:100%;
    width:100%;
}
Après vu que tu utilises jquery tu peux en profiter pour faire comme cela :

Html

<tr data-href="page.php">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});
j'utilise du JQuery car on l'as vu en formation (1 seul jour) mais je ne suis pas familier avec .... Je dois apprendre le JS et le JQuery mais j'ai pas le temps en ce moment ...

En tout cas merci de tes réponses, je vais tenter de comprendre et pas seulement de copier/coller comme un con
Tant que tu es là encore une fois pour m'aider, lorsque je passe ma souris, je peut afficher autre chose que quelque chose qui est parenté ?

En gros j'aimerai que ce que j'affiche actuellement soit détaché du li (il ne sera donc plus l'élement enfant)
Sujet clos
Aller à