Question

我有一个JQuery脚本，允许根据我ul中选择的li来打开和关闭一系列div。我添加了一个添加/删除SelectedClass以允许悬停在open div上，但是该类不会添加。它之前添加了，但在点击/打开另一个div时则不会删除。

此外，我希望div在第二次点击时关闭，（如果已经打开，它应该关闭）但是我不知道如何添加它...可能有人请帮助

切换的div不会在jsfiddle中打开，但那部分在jsfiddle之外为我工作..

$(document).ready(function() {
$(".artist-box").hide();
$("#artists ul li a li").removeClass('selected-artist');

$(".artist-logo").click(function(event) {
    event.preventDefault();
    $("#artists ul a li").removeClass('selected-artist');
  $(this).toggleClass('selected-artist');

    $('.artist-box').hide();

    var relatedDivID = $(this).attr('href');

    $(relatedDivID).slideToggle(); 
});

}）;

Answer 1

基本上你在少量代码中尝试做很多事情。您需要对其进行扩展以使其更加灵活。很高兴你尝试使用尽可能少的jQuery，但请试一试。

http://jsfiddle.net/LWVsj/1/

我必须摆脱.selected-artist的CSS。我不确定这一点为什么它会弄乱任何东西，但是当我点击它时它会引起一些跳跃。

$(document).ready(function() {
$(".artist-box").hide();
$("#artists ul li a li").removeClass('selected-artist');

$(".artist-logo").click(function(event) {  
    var relatedDivID = $(this).attr('href');
    $('.artist-box').hide();
    if(jQuery(this).hasClass('selected-artist')){
        $(".artist-logo").removeClass('selected-artist');
        return;
    }else{
      $(".artist-logo").removeClass('selected-artist');
      $(this).toggleClass('selected-artist');
    }



    $(relatedDivID).slideToggle(); 
});
});

编辑：有些方法我会改变它以使其更好，但我想使用你已经使用的大部分相同的代码。我假设你想使用它是有原因的。

Answer 2

此处显示了您想要的切换功能：http://jsfiddle.net/q6NDn/1/

您没有检查已经选择的内容，但只是试图通过每次点击隐藏所有内容。通过检查已经选择的东西，您可以实际滑动关闭打开的艺术家div。

$(document).ready(function() {
    $(".artist-box").hide();
    $(".artist-logo").click(function(event) {
        event.preventDefault();
        // get the clicked element
        var clicked = $(this);
        // get the selected element
        var taggedWithSelect = $('.selected-artist');  
        // get the corresponding divs
        var clickPartner = $(clicked.attr('href'));
        var selectPartner = $(taggedWithSelect.attr('href'));
        // we either want to close this one or open this one and close any others
        // if this one is open, it should be tagged with select
        if( clicked.hasClass('selected-artist') ) {
            clicked.removeClass('selected-artist');
        } else {
            clicked.addClass('selected-artist');
            taggedWithSelect.removeClass('selected-artist');
            selectPartner.slideToggle();
        }
        clickPartner.slideToggle();
    });
});

选修课程＆＃34; li a＆＃34;当切换div时，不会关闭

2 个答案: