jquery show/hide div点击？

问题描述：

我试图用jQuery来显示和隐藏div onclick，尽管我没有收到任何错误，但它并没有显示或隐藏任何东西。jquery show/hide div点击？

**编辑 - 更新**

$(document).ready(function() {  
     $("#nav-inner a").click(function() { 
      var type = $(this).attr("class"); 
       $("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show(); 
       return false; 
    });

}）;

这里是jQuery的：

$(document).ready(function() { 
     if($("#nav-inner")) { 
       $("#nav-inner ul li a").click(function(evt) { 
         var type = $(this).attr("class"); 
         var rowcount = 0; 
         $('div.v1 .vc').each(function(idx,el) { 
           if(type == 'typea') { 
            if($(el).hasClass('typea')) { 
               $(el).show(); 
             } else { 
               $(el).hide(); 
             } 
           } 
         }); 
        }); 
    } 
});

而这里的标记：

<div id="page"> 
    <div id="header"> 
     <div id="nav"> 
      <div id="nav-inner"> 
       <ul class="nav-inner-li"> 
        <li> 
         <a class="typea" href="#"><img src="/images/typea.png"></a> 
         <a class="typea" href="#">Type A</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div id="content"> 
     <div id="content-content"> 
      <div id="content-left"> 
       <div class="v1"> 
        <div class="vc"> 
         <div class="typea"> 
          <div class="title"> Title </div> 
          <div class="body"> Body </div> 
         </div> 

         <div class="typeb"> 
          <div class="title"> Title 2 </div> 
          <div class="body"> Body 2 </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

答

这可以由简单得多。

$(function() { 
    $("#nav-inner a").click(function() { 
    var type = $(this).attr("class"); 
    $("div.vc > div").not("." + type).stop().hide() 
     .end().filter("." + type).stop().show(); 
    return false; 
    }); 
});

你的第一个错误是#nav-inner ul其中#nav-inner实际上是ul元素。上面从被点击的链接中抓取类，然后选择该类的孩子div.v1并切换它（如果隐藏，则显示它，如果不隐藏，则隐藏它）。

我总是用e.preventDefault（），而不是返回false。纠正我，如果我错了，但不返回false只取消当前元素的事件？并preventDefault（）停止事件链？ – fredrik 2010-02-10 08:54:53

谢谢...它的工作，有点......除了需要隐藏除了那个类的div之外的所有东西。因此，点击显示typea divs并隐藏所有其他div ...这看起来正好相反......？ – phpN00b 2010-02-10 08:55:25

@fredrik：'return false'等价于'preventDefault（）**和**'stopPropagation（）'。 – cletus 2010-02-10 08:59:33

答

这是一个简单的例子..

<script> 
     $(document).ready(function(){ 
      $('#divtag').click(function(){ //use # for id and . for class 
       $('#insidetag').show();  // with parameters slow,fast, or a time in milisecond 
      });        // use toggle to show and hide 
     }); 
    </script> 

<body> 
    <div id="divtag"> 
     <div id="insidetag"> 
      Click the hide and show 
     </div> 
    </div> 
</body>

您的简单评论//使用＃为id和。class for saved me hours !! Thanks gifted！ – Amod 2014-08-31 13:12:06

答

jQuery(".user-profile-info").unbind().click(function(){ 
    if(jQuery(".user-profile-info").hasClass("collapsed")){ 
     jQuery('#user-profile-submenu').css('display', 'block'); 
     jQuery(".user-profile-info").removeClass("collapsed"); 
    } 
    else 
    {  
     jQuery(".user-profile-info").addClass("collapsed"); 
     jQuery('#user-profile-submenu').css('display', 'none'); 
    } 
});

Content of click

– 2016-12-02 06:34:39

jquery show/hide div点击？

相关推荐