如何在单击时使用jquery隐藏子div并为父级添加类名 书签 第一项资产 最新更新 资产形象 测试资产1 菜单

没有菜单

主菜单

• 资产形象
• 测试资产1

代码如下：

当我单击

标记内的span class“exp coll”时，我的预期结果是

相应的next

或next

标记应隐藏

在h4标签中，应删除类“标题展开”，并添加“标题折叠”。

同时，当我第二次单击span class“exp coll”时，应该会出现相反的情况

这是对应的下一个

或下一个

标记应显示的

在h4标签中，应删除类“标题折叠”，并添加“标题扩展”。

如何使用jQuery实现这一点

使用jQuery的.next（）和.toggle（）函数，任何帮助都将是感激和感激的…

！不过，fadetoggle看起来要好一点：

使用以下方法：

    <li>
    <h4 class="title-exp-coll title-expand">
    <span class="exp-coll"></span>Bookmarks</h4>
    <div class="item-list">
    <ul>      
    <li class="first"><div>first Asset</div></li>
    <li><div>Latest Updates</div></li>
    <li><div>asset image</div></li>
    <li><div>test Asset 1</div></li>
    </ul></div>
    </li>

    <li>
    <h4 class="title-exp-coll title-expand">
    <span class="exp-coll"></span>Menu</h4>
    <p>No menu.</p>
    </li>

    <li>
    <h4 class="title-exp-coll title-expand">
    <span class="exp-coll"></span>Main Menu</h4>
    <div class="item-list">
    <ul>      
    <li><div>asset image</div></li>
    <li><div>test Asset 1</div></li>
    </ul></div>
    </li>

---

祝你好运

你应该粘贴一些代码来了解你在做什么。你不能只是发布你的要求，让别人来做你的工作。@ankur，也许他自己做不到：（@AliForoughi你说得对。你发布了详细的答案，成就了他的一天。@ankur：我同意你的说法。但这并不意味着我要求其他人做我的工作。我在SOF中发布我的问题的唯一原因是我得到了许多解决同一问题的方法。我从中学到了很多新东西。这就是我所不知道的如果是这样的话，最重要的是我不会要求任何人做我的工作…@ankur:请找到我发布的答案…@Ali Foroughi:你唯一的错误是你在开始时设置了flag=true..所以，我只会对hide起作用，当你第二次单击时，它将解析到else类..请更改它..这样我就可以标记为答案。。。

$(function(){

    $("h4 span.exp-coll").click(function(){

        if($(this).parents("h4").hasClass("title-expand")){
           //number 1
           $(this).next("div").hide();
           //Number 2
           $(this).parents("h4").removeClass("title-expand").addClass("title-collapse");               
        }
        else{

           //number 4
           $(this).next("div").show();
           //Number 5
           $(this).parents("h4").removeClass("title-collapse").addClass("title-expand");           

        }

    });

});

 $("span.exp-coll").click(expand_collapse);   

function expand_collapse() {
        flag = $(this).parent("h4").hasClass("title-expand");
        if(flag){
             $(this).parents('li').children('div, p, form').slideUp('slow');
             $(this).parents("h4").removeClass("title-expand").addClass("title-collapse");
             flag = false;
        }
        else{
             $(this).parents('li').children('div, p, form').slideDown('slow');
             $(this).parents("h4").removeClass("title-collapse").addClass("title-expand");
             flag = true;
        }
    }