切換格上單擊

文本這裏是我的jQuery切換格上單擊

jQuery(document).ready(function($) { 
    $("#accordion").find(".accordion-toggle").click(function(){ 
     $(this).next().slideToggle("fast"); 
     $(".accordion-content").not($(this).next()).slideUp("fast"); 
    }); 
});

這裏是我的HTML

<div id="accordion"> 
    <header class="accordion-toggle"> 
     <h2>Accordion Title <span id="accordionIcon">▼</span></h2> 
    </header> 
    <section class="entry accordion-content"> 
     <p>Accordion Content</p> 
    </section> 
</div>

每當一個新的accordion-toggle點擊我需要老accordionIcon更改爲相反的箭頭，新一也改變。我試過用$(".accordion-content").not($(this).next()).parent().find('#accordionIcon')來做，但它找不到正確的元素

來源

2015-09-08 Curtis

你所說的「新還改變」是什麼意思？ –

他想要點擊圖標 – Zl3n

您正在按課程選擇arcordionIcon，而不是按Id。您可以使用（'#accordionIcon'）簡單地選擇id爲accordionIcon的元素。記住所有的ID應該是唯一的。 –

這裏是fiddle。這是你想要的？

這是我添加的代碼。

if($(this).find("span#accordionIcon").text()=="▼"){ 
    $(this).find("span#accordionIcon").text("▲"); 
} 
else{ 
    $(this).find("span#accordionIcon").text("▼"); 
}

來源

2015-09-08 14:22:40

你正在尋找的角色是'''' – MinusFour

謝謝：P我到處搜索，找不到它。 –

使用'addClass'好得多，因爲**如果用戶有特殊字符的問題，這段代碼就不會工作！**下面的Mine將一直工作 – Zl3n

還是沒有改變你的代碼，你可以做這樣的：

jQuery(document).ready(function($) { 
    $("#accordion").find(".accordion-toggle").click(function(){ 
     var span = $(this).find('span'); 
     if (span.hasClass('isOpened')) { 
      span.removeClass('isOpened').html('▲'); 
     } else { 
      span.addClass('isOpened').html('▼'); 
     } 
     $(this).next().slideToggle("fast"); 
     $(".accordion-content").not($(this).next()).slideUp("fast"); 
    }); 
});

JSFIDDLE

來源

2015-09-08 14:29:40 Zl3n

接受的答案只有一個切換工作。這裏是版本（Codepen），多的工作：

HTML

<div id="accordion"> 
    <header class="accordion-toggle"> 
     <h2>Accordion Title 1<span>▲</span></h2> 
    </header> 
    <section class="entry accordion-content"> 
     <p>Accordion Content</p> 
    </section> 
    <header class="accordion-toggle"> 
     <h2>Accordion Title 2<span>▲</span></h2> 
    </header> 
    <section class="entry accordion-content"> 
     <p>Accordion Content</p> 
    </section> 
</div>

jQuery(document).ready(function($) { 
    $("#accordion").find(".accordion-toggle").click(function(){ 
     if ($(this).find('span').text() == '▼') { 
      $(this).siblings(".accordion-content").slideUp("fast"); 
      $(this).siblings(".accordion-toggle").find('span').text('▼'); 
      $(this).next().slideDown("fast"); 
      $(this).find('span').text('▲'); 
     } else { 
      $(this).next().slideUp("fast"); 
      $(this).find('span').text('▼'); 
     } 
    }); 
});

來源

2015-09-08 14:36:35

如果你想使用字體真棒

jQuery(document).ready(function($) { 
 
    $("#accordion").find(".accordion-toggle").click(function(){ 
 
     $(this).next().slideToggle("fast"); 
 
     if($(".fa").hasClass("fa-arrow-down")){$(".fa").removeClass("fa-arrow-down").addClass("fa-arrow-up");} 
 
     else $(".fa").removeClass("fa-arrow-up").addClass("fa-arrow-down"); 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
<div id="accordion"> 
 
    <header class="accordion-toggle"> 
 
     <h2>Accordion Title <i class="fa fa-arrow-down"></i></h2> 
 
    </header> 
 
    <section class="entry accordion-content"> 
 
     <p>Accordion Content</p> 
 
    </section> 
 
</div>

來源

2015-09-08 14:49:37

jQuery(document).ready(function($) {  
    $("#accordion").find("a").click(function(){     

//'all' triangles returned to initial position, because some of triangle is 
    //up but wich one? User can click any: 
$("#accordion").find("span.rght").text("▼");  
if($(this).find("span.rght").text()=="▼"){  
$(this).find("span.rght").text("▲");     
} 
//else{$(this).find("span.rght").text("▼");} //sometime does not work!? 
    });  
});  

//see working website: http://evadapter.com/faq.html 
<style> 
    .rght{float:right} 
</style>

來源

2017-10-07 04:37:04 mcc

切換格上單擊

回答

相關問題