在jQuery手風琴標題內切換span類

爲簡潔起見，爲了使手風琴標題直觀，我希望在手風琴的最右側追加一個展開/摺疊，以便在活動時它將從「摺疊」最初標記爲「展開」，我希望爲每個單獨的標題做到這一點。在jQuery手風琴標題內切換span類

我已經挖了很多例子，並與jsFiddle搞砸了。我相信「id」是問題，並且javascript被大量的第n次點擊所困擾。在某些情況下，「跨度」會翻轉，而在其他情況下，或者沒有任何反應，或者所有的手風琴標題都會被改變。

仍然是jQuery和JavaScript的新手，我一直在討論這個問題近幾個星期。任何人都願意給我一個正確的方向碰撞嗎？

HTML：

<div id="accordion"> 

<h3> 
    <a class="accordion_header_1" href="#"> 
     Headline 1 
     <span style="float:right;">Expand</span> 
     <span style="float:right;display:none;">Collapse</span> 
    </a> 
</h3> 
    <div>Blah blah blah</div> 

<h3> 
    <a class="accordion_header_2" href="#"> 
     Headline 2 
     <span style="float:right;">Expand</span> 
     <span style="float:right;display:none;">Collapse</span> 
    </a> 
</h3> 
    <div>Blah blah blah</div> 

<h3> 
    <a class="accordion_header_3" href="#"> 
     Headline 3 
     <span style="float:right;">Expand</span> 
     <span style="float:right;display:none;">Collapse</span> 
    </a> 
</h3> 
    <div>Blah blah blah</div> 

</div>

的Javascript：

jQuery().ready(function() { 
    jQuery("#accordion").accordion({ 
     header: "h3", collapsible: true, active: false, heightStyle: "content", navigation: true  
    }); 
}); 

$(".accordion_header_1").click(function() { 
    $("span").toggle(); 
});

小提琴：http://jsfiddle.net/79HeD/1/

來源

2014-02-10 redchair218

您要使用的jQuery accordion API，使得它不依賴於點擊，但是手風琴的實際切換。

jQuery().ready(function() { 
    jQuery("#accordion").accordion({ 
     header: "h3", 
     collapsible: true, 
     active: false, 
     heightStyle: "content", 
     navigation: true, 
     activate: function(event, ui) { 
      ui.newHeader.find('span').toggle(); 
      ui.oldHeader.find('span').toggle(); 
     } 
    }); 
});

fiddle

來源

2014-02-10 21:19:46 Tomanow

指定的規則我不能說「謝謝」，所以我很抱歉爲久違。但現在我可以，因爲我沒有意識到它，直到它指出我的UI圖標ui-icon-triangle-1-s在切換被激活時消失。任何保留三角形的想法？感謝您回答我最初的問題。 – redchair218

我來看一下 – Tomanow

你可以把它加到你的CSS裏''.ui-icon-triangle-1 -s {display：block！重要; }'，看起來其他人遇到這個問題是兩次加載手風琴腳本或其他東西。如果你正在加載jQuery UI，你不需要單獨的手風琴腳本。 – Tomanow

你一般切換所有跨度，基於第一頭的點擊元件。你應該能夠解決切換他們都與此：

$('.accordion_header_1').click(function() { 
    $(this).children('span').toggle(); 
});

這裏是一個Fiddle

要一般的事件附加到所有標題，試試這個：

$('.ui-accordion-header').children('a').click(function() { 
    $(this).children('span').toggle(); 
});

這裏是一個Fiddle

來源

2014-02-10 21:13:56 Bic

如果我正確理解你，你可以簡單地使用一個普通的類和$(this)：

http://jsfiddle.net/isherwood/79HeD/5/

$(".accordion").click(function() { 
    $(this).children("span").toggle(); 
});

來源

2014-02-10 21:17:36 isherwood

怎麼樣純CSS的解決方案嗎？ HERE

<h3> 
    <a class="accordion_header_1" href="#"> 
     Headline 1 
     <span class="spanexpand" style="float:right;">Expand</span> 
     <span class="spancollapse" style="float:right;display:none;">Collapse</span> 
    </a> 
</h3> 

.ui-state-active > a .spancollapse{ 
display:block !important; 
} 
.ui-state-active > a .spanexpand{ 
display:none !important; 
}

注意：我只是在第一個h3中爲跨度添加類。你可以添加其餘的。

來源

2014-02-10 21:39:14

在jQuery手風琴標題內切換span類

回答

相關問題