2010-02-10 128 views
2

我试图用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> 

回答

4

这可以由简单得多。

$(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并切换它(如果隐藏,则显示它,如果不隐藏,则隐藏它)。

+0

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

+0

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

+0

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

1

这是一个简单的例子..

<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> 
+0

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

0

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'); 
    } 
}); 
+0

Content of click
2016-12-02 06:34:39