隐藏或显示其他 div 时单击元素的 jQuery 切换类

Question

我使用下面的代码来切换一些 div，正在工作。
我想删除被点击元素的类“链接”，当点击其他元素时也删除它并将其添加回前一个。 被按下的主要元素应该删除类，而所有其他元素都没有。

$(this).toggleClass("link") ...

 $('a').on('click', function() { var target = $(this).attr('rel'); $("#" + target).toggle().siblings("div").hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="cat-1" class="show"> <div> <a class="link" rel="main-1" href="#">Main A</a> </div> </div> <div id="cat-2" class="show"> <div> <a class="link" rel="main-2" href="#">Main B</a> </div> </div> <div id="cat-3" class="show"> <div> <a class="link" rel="main-3" href="#">Main C</a> </div> </div> <div class="row"> <div id="main-1" class="description" style="display:none;"> <p>At vero eos et accusamus.</p> </div> <div id="main-2" class="description" style="display:none;"> <p>et iusto odio dignissimos.</p> </div> <div id="main-3" class="description" style="display:none;"> <p>At vero eos et accusamus et iusto odio dignissimos.</p> </div> </div>

Answer 1

这将检查link类（ .hasClass ）并相应地切换。

通过查找以"cat-"开头的 id ( "div[id^='cat-'] > div > a" ) 来找到父 div

 $('a').on('click', function() { if ($(this).hasClass("link")) { $("div[id^='cat-'] > div > a").addClass("link"); $(this).closest("div").find("a").removeClass("link"); } else { $("div[id^='cat-'] > div > a").addClass("link"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="cat-1" class="show"> <div> <a class="link" rel="main-1" href="#">Main A</a> </div> </div> <div id="cat-2" class="show"> <div> <a class="link" rel="main-2" href="#">Main B</a> </div> </div> <div id="cat-3" class="show"> <div> <a class="link" rel="main-3" href="#">Main C</a> </div> </div> <div class="row"> <div id="main-1" class="description" style="display:none;"> <p>At vero eos et accusamus.</p> </div> <div id="main-2" class="description" style="display:none;"> <p>et iusto odio dignissimos.</p> </div> <div id="main-3" class="description" style="display:none;"> <p>At vero eos et accusamus et iusto odio dignissimos.</p> </div> </div>