添加切換到基本的jQuery手風琴影響

就像默認使用的HTML標籤提供的肘細節和摘要（fiddle example），我試圖讓一個小撥動出現了這條左側基本jQuery的手風琴效果，像這樣（PNG）：添加切換到基本的jQuery手風琴影響

enter image description here

到目前爲止，我有這樣的代碼：

HTML：

<div id="accordion"> 
    <h4 class="accordion-toggle">TOGGLE ONE</h4> 
    <div class="accordion-content"> 
    <p>Cras malesuada ultrices augue molestie risus.</p> 
    </div> 
    <h4 class="accordion-toggle">TOGGLE TWO</h4> 
    <div class="accordion-content"> 
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
    </div> 
</div>

CSS：

.accordion-toggle {cursor: pointer; margin: 0;} 
.accordion-content {display: none;} 
.accordion-content.default {display: block;}

JQUERY：

$(document).ready(function($) { 
     $('#accordion').find('.accordion-toggle').click(function(){ 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

     }); 
    });

來源

2014-01-25 fakeguybrushthreepwood

這是做也無妨的一種方式。（我不能說沒有更好的方法。）

您可以插入一個<span>作爲切換的第一個子元素（<h4>）元素。它應該有display設置爲inline-block。然後可以給它一個寬度和高度以及背景圖像。該圖像將是指向右側的箭頭。

當一個切換打開（即正在顯示內容）時，另一個類將被添加到<span>以將箭頭更改爲指向下方。

我沒有使用兩個圖像文件，而是創建了一個包含兩個圖標的圖像文件。（我使用了在問題中顯示的箭頭。）background-position樣式設置用於選擇圖像文件中的圖標。

下面是兩個類的CSS。該<span>元素總是有「圖標」類，但只有具備「圖標打開」上課的時候，他們是開放：

.icon { 
    display: inline-block; 
    text-indent: -99999px; 
    overflow: hidden; 
    background-repeat: no-repeat; 
    background-image: url('http://s14.postimg.org/cx1k4l135/ui_icons_222222_256x240.png'); 
    width: 16px; 
    height: 16px; 
    background-position: -32px -16px; 
} 
.icon-open { 
    background-position: -64px -16px; 
}

JQUERY：

$(function() { 
    var $toggles = $('#accordion').find('.accordion-toggle'); 

    $toggles.click(function() { 
     var $toggle = $(this), 
      $content = $toggle.next(), 
      $arrow = $toggle.children(':first'), 
      isOpen = $arrow.hasClass('icon-open'); 

     $arrow.toggleClass('icon-open', !isOpen); 
     $toggles.children(':first').not($arrow).removeClass('icon-open'); 

     $content.slideToggle('fast'); 
     $(".accordion-content").not($content).slideUp('fast'); 

    }).prepend('<span class="icon"></span>'); 
});

Demo on JSFiddle

來源

2014-01-25 03:15:29

哇，感謝你的努力。我確實發現了類似的東西，但我正在仔細檢查你做了什麼。我有的主要問題是我試圖用實際站點中的圖像來完成這樣的事情：http://snag.gy/PVrAe.jpg由於箭頭現在使用bg圖像，我不知道如何實現它。我嘗試並實施它的每一種方式，最終都會裁剪出圖像。 – fakeguybrushthreepwood

@fakeguybrushthreepwood - 如果你有一個你找到的「類似的東西」的鏈接，請分享它。我基本上看過箭頭如何工作[JQuery UI Accordion]（http://jqueryui.com/accordion/）。 –

@JohnS你可以使用unicode作爲箭頭;看到這個答案，我剛剛寫了幾個小時前.. http://stackoverflow.com/questions/21343744/make-the-contents-of-a-details-tag-animate-when-open-with-jquery-js/ 21345510＃21345510它比密切相關。 1+ –

添加切換到基本的jQuery手風琴影響

回答

相關問題