jquery隱藏活躍的手風琴內容

我在實現基本的jquery手風琴，如果手風琴內容是開放的，那麼就會執行向上滑動和向下滑動操作。它應該只隱藏（向上滑動）內容div。需要某人的幫助。jquery隱藏活躍的手風琴內容

$(document).ready(function() { 
    $("h3").click(function() { 
    if ($(".accordion-content").is(":visible")) { 
     $(".accordion-content").slideUp(600); 
     $("span.plusminus").text("+"); 
    } 
    $(this).next(".accordion-content").slideDown(600); 
    $(this).find("span.plusminus").text("-"); 
    }); 
});

h3 { 
    background: #ccc; 
    padding: 10px; 
} 
.accordion-content { 
    display: none; 
    height: 50px; 
} 
.plusminus { 
    float: right; 
}

<div class="accordion_container"> 
    <h3>Lorem Ipsum<span class="plusminus">+</span></h3> 
    <div class="accordion-content"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
    </div> 
    <h3>Lorem Ipsum<span class="plusminus">+</span></h3> 
    <div class="accordion-content"> 
    <p>Works fine</p> 
    </div> 
    <h3>Lorem Ipsum<span class="plusminus">+</span></h3> 
    <div class="accordion-content"> 
    <p>Works fine</p> 
    </div> 
</div>

來源

2016-06-01 dvln

這裏是工作提琴：https://jsfiddle.net/ phaneendra/L78szd2b/2/ – dvln

你可以做，

$("h3").click(function() { 
    if ($(".accordion-content").is(":visible")) { 
    $(".accordion-content").not($(this).next()).slideUp(600); 
    $("span.plusminus").text("+"); 

    } 
    $(this).next(".accordion-content").slideToggle(600); 
    $(this).find("span.plusminus").text("-"); 
});

Fiddle

使用SlideToggle()當前cliked元素。
USe slideUp()適用於除當前元素之外的所有元素。

修復了圖標

$("h3").click(function() { 
    var icon = $(this).find("span.plusminus"); 
    $(".accordion-content").not($(this).next()).slideUp(600); 
    $("span.plusminus").not(icon).text("+"); 
    $(this).next(".accordion-content").slideToggle(function() { 
    if ($(this).is(":visible")) { 
     icon.text("-"); 
    } else { 
     icon.text("+"); 
    } 
    }); 
});

Edited Fiddle

來源

2016-06-01 07:58:02

謝謝。但是，現在加減是不正確的。你能幫我解決這個問題嗎？ – dvln

@dvln讓我檢查一下 –

我會做這種方式：

$(document).ready(function(){ 
$('.plusminus').click(function(e){ 
    e.preventDefault(); 
    if (!$(this).hasClass('open')){ 
    $(this).addClass('open'); 
    $(".accordion-content").slideDown(600); 
    }else{ 
    $(this).removeClass('open'); 
    $(".accordion-content").slideUp(600); 
    } 
}); 
}

來源

2016-06-01 07:59:23 Franz

jquery隱藏活躍的手風琴內容

回答

相關問題