隐藏并显示多个div

时间:2014-09-15 21:58:07

标签: javascript jquery html css

我想隐藏并显示div(jQuery toggle())。这是我的代码示例:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
   $("a").click(function() {
       var myelement = $(this).attr("href");
       $(myelement).slideToggle("slow");
       $(".toggle:visible").not(myelement).hide(500);    
   });
 </script>

  <h2><a href="#box1"> Programming</a></h2>

   <div id="box1" class = "block-content" style="display:none">
    box 1 
   </div>

   <h2><a href="#box2"> software</a></h2>

   <div id="box2" class = "block-content" style="display:none">
    box 2
   </div>

它不起作用,Firebug没有向我显示错误消息。

你能帮助我吗?

3 个答案:

答案 0 :(得分:1)

演示:http://jsfiddle.net/xyzpq44x/

休息应该有助:)

试试这个

$("a").click(function (e) {
    e.preventDefault();
    var myelement = $(this).attr("href")
    $(myelement).slideToggle("slow");
    $(".toggle:visible").not(myelement).hide(500);

});

答案 1 :(得分:1)

当脚本运行时,页面上还没有a标签!

将您的脚本放在html元素下面,或使用文档就绪或等效推迟脚本执行。

答案 2 :(得分:1)

$(".toggle:visible").not(myelement).hide(500);

将“.toggle:visible”替换为“div”