在div之间切换(关闭一个已经打开的点击另一个)

时间:2014-11-22 20:04:47

标签: jquery slidetoggle

我是jQuery的新手,几天来一直坚持这个问题!我在导航栏中有几个按钮,可以打开下面的特定div。我用slideToggle打开它们,效果很好。但是,如果"点菜"是开放的,我点击" les地址," "点菜"保持开放!我怎么做到这一点,如果你点击一个按钮,任何div已经打开将关闭?请帮忙!!

HTML:

    <body>
    <div class="nav">
<ul>
<li id="t-menu"><a id="button">la carte</button></li>
<li id="t-adresses"><a id="button2">les adresses</a></li>
<li id="t-presse"><a id="button3">la presse</a></li>
<li id="t-contact"><a id="button4">contact</a></li>
</ul>
</div>
<div id="menu">
<p>5 euro sandwichs | 6 euro salades</p>

<ul>

    <li class="first"><strong>L'Original</strong><br>houmous, carottes, dés d'aubergine, salade</li>

    <li class="item"><strong>Le Grec</strong><br>tapenade olives-tomate, oignons rouges, fromage, salade</li>

    <li class="item"><strong>Le Redneck</strong><br>sauce philadelphia barbecue, tomate, mais, cornichon</li>


    <li class="noborder"><strong>Le Veggie Fest</strong><br>tapenade aubergines, carottes, mais, salade</li>

    <li class="middle"><strong>Le Provençal</strong><br>caviar de tomates, crème d'artichaut, concombre, carottes, dés d'aubergine</li>

    <li class="middle"><strong>Attention</strong><br>traces de sésame et de noix</li>


</ul>

</div>

<div id="map">

    <h3>Notre addresse</h3>
    <p>On se trouve à 17 Rue d'Algérie à Lyon</p>
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=17%20Rue%20d'Alg%C3%A9rie%2C%20Lyon%2C%20France&key=AIzaSyAKr9uzWTir1ejce2UfXBIfX1R1UcWQsoM"></iframe>

<p>D'autres locaux à venir!</p>

    </div>

jQuery的:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>


});

$(document).ready(function(){
    var par=$("#menu").hide();

    $("#button").click(function(e){
        $("#menu").slideToggle("slow");

            e.preventDefault();

});
});


$(document).ready(function(){
    var par =$("#map").hide();

    $("#button2").click(function(e){
        $("#map").slideToggle(500);

        e.preventDefault();
    });

});

</script>

0 个答案:

没有答案