jQuery：如何「打開」打開slideToggle div？

是否有可能「滑落」已用slideToggle打開的活動div？jQuery：如何「打開」打開slideToggle div？

該功能可以相互獨立地打開多個文本div，但打開的div的click(function()仍然是可點擊的，因此div會反彈並再次打開。這主要是用戶體驗;我希望用戶無法點擊已經打開的div。

的jsfiddle：http://jsfiddle.net/auUxk/12/

$(".entry-content").hide(); 
$(".entry-title").click(function() { 
    $(".entry-content").hide(); 
$(this).parent().children(".entry-content").slideToggle(500); });

HTML：

<div class="entry-post"> 

    <h2 class="entry-title">Post Title 1</h2> 

     <div class="entry-content">Lorem Ipsum Lorem Ipsum 

    </div></div> 

<div class="entry-post"> 

     <h2 class="entry-title">Post Title 2</h2> 

     <div class="entry-content">Lorem Ipsum Lorem Ipsum Lorem Ipsum 

    </div></div>

來源

2011-04-30 markratledge

你的意思是有兩個閉合的div標籤？ – 2011-04-30 19:53:48

@xixonia，如果你看看他發佈的[JS Fiddle]（http://jsfiddle.net/auUxk/12/），這不是一個錯誤，但可能是複製粘貼代碼片段的人工製品。 – 2011-04-30 19:56:37

Arg。我的錯。 HTML已更正。這是Wordpress循環生成的標記。 – markratledge 2011-04-30 20:05:02

我認爲這是你想要的。似乎大多數人沒有注意到你一次只想保留一個開放格。

http://jsfiddle.net/entropo/WnpGv/

jQuery(document).ready(function($) { 
    $(".entry-title").click(function() { 
     $this = $(this); 
     var $content = $this.next(".entry-content"); 
     if (! $content.is(":visible")) { 
      $(".entry-content:visible").slideToggle(100); 
      $content.slideToggle(500); 
     } 
    }); 
});

編輯：
這個UI模式被稱爲accordion。也有lots of plugins以更戲劇性/複雜的方式實現這一點。

另外，jQuery UI有手風琴in their API。請記住手風琴API is being revamped for 1.9。

來源

2011-04-30 20:53:40 entropo

非常好，謝謝。正是我想要做的，以保持我正在構建的網站上的其他功能。我意識到有插件和其他複雜的手風琴，但我想保持它相當簡單。我也將使用背景顏色變化CSS，以突出顯示活動文本div。是否有可能給h2標題懸停和主動顏色？ – markratledge 2011-05-01 01:09:46

@songdogtech - 當然，有點類切換和一點額外的CSS將處理：http://jsfiddle.net/entropo/WnpGv/23/ – entropo 2011-05-01 06:02:19

謝謝！效果很好。 – markratledge 2011-05-03 03:11:12

「我想用戶無法點擊已打開的股利。」

這將工作：http://jsfiddle.net/xixionia/9P6My/

<div> 
    <h2 class="entry-title">Post Title 1</h2> 
    <div class="entry-content">Lorem Ipsum Lorem Ipsum</div> 
</div> 

<div> 
    <h2 class="entry-title">Post Title 1</h2> 
    <div class="entry-content">Lorem Ipsum Lorem Ipsum</div> 
</div>

和

$(".entry-title").click(function() { 
    $(this) 
     .next('.entry-content:not(:visible)') 
     .slideToggle(500); 
});

而CSS：

.entry-content 
{ 
    display: none; 
}

或者，你總是可以跳過CSS和使用隱藏（）在所有入口內容分類的元素上。 :)

這將切換幻燈片的第一個後續元素與「.entry-content」類不可見，並且不會滑動它們關閉。

如果你想真正從click事件取消綁定自己完全，你可以使用undbind（「點擊」）

$(".entry-title").bind('click', function() { 
    $(this) 
     .unbind('click', arguments.callee) 
     .next('.entry-content') 
     .slideToggle(500); 
});

這將是最精明的做法，並且將不解除綁定您可能會綁定到點擊事件的其他功能。

或者，你可以取消綁定使用事件命名空間：

$(".entry-title").bind('click.slideopen', function() { // bind a click event with the slideopen namespace 
    $(this) 
     .unbind('.slideopen') // unbind all events in the slideopen namespace 
     .next('.entry-content') 
     .slideToggle(500); 
});

你可以看到這個在這裏一個例子：http://jsfiddle.net/xixionia/9P6My/6/

來源

2011-04-30 19:58:45

我想這將允許多個「div」打開。這就是「隱藏」在做什麼 – 2011-04-30 20:00:05

對不起，我的意思是第二個隱藏。原本他每次點擊都隱藏起來。我已經添加了缺少的CSS。 – 2011-04-30 20:01:53

我的錯誤; HTML被糾正。這是Wordpress循環生成的標記。 – markratledge 2011-04-30 20:06:04

如果你想點擊關閉，你可以這樣做：

$(".entry-content").hide(); 
$(".entry-title").click(function() { 
    $(".entry-content").hide(); 
    $(this).parent().children(".entry-content:visible").slideToggle(500); 
});

這將關閉所有divs，但不會再打開它。如果你想保持它打開：

$(".entry-content").hide(); 
$(".entry-title").click(function() { 
    var d = $(this).next(); 
    if (!d.is(":visible")) { 
     $(".entry-content").hide(); 
     d.slideToggle(500); 
    } 
});

來源

2011-04-30 20:01:52

jQuery：如何「打開」打開slideToggle div？

回答

相關問題