jquery在点击时显示/隐藏div？

Question

我正在尝试使用jquery来显示和隐藏一个div onclick，虽然我没有收到任何错误，但它也没有显示或隐藏任何东西。

**编辑-更新**

$(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>

Answer 1

这可以变得更简单。

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

Answer 2

这是一个简单的例子..

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

Answer 3

​

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