簡單的顯示/隱藏切換交換/切換圖像上單擊時

Question

你好我是一個新手，可能在您的幫助，請做，

我需要一個簡單的顯示/隱藏切換圖像上單擊時，即一間互換'側向箭頭'和'向下箭頭'（就像一個下拉箭頭）。這是用文字顯示/隱藏各個div。但是，我需要它在類中，因爲進入使用ID的.net。

這已經是在ID的，它的作品，但它需要在課堂上....

我的功能是： -

<script type="text/javascript"> 
$(function(){ 
    $('.nav-toggle').on('click', function(){ 
    var t = $(this); 
    var imgSrc = t.attr('src'); 
    var divId = t.attr('id'); 
    $(divId).slideToggle('slow', function() { 
     if (imgSrc === '_includes/img/components/toggle_icon_show.png') { 
     t.attr({'src' :'_includes/img/components/toggle_icon.png'}); 
     } else { 
     t.attr({'src' :'_includes/img/components/toggle_icon_show.png'}); 
     } 
    }); 
    }); 
}); 
</script> 


HTML:- 

<img src="_includes/img/components/toggle_icon.png" id="#1" class="nav-toggle"> 

<div id="1" style="display:none"> 
<p>Maecenas vulputate, augue vitae sagittis molestie, ipsum neque rhoncus turpis, sit amet iaculis sapien quam sed nunc. Donec neque erat, pulvinar non ultrices sit amet, dignissim at lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in erat sapien. Nullam mi dolor, consectetur et turpis sit am.</p></div> 

謝謝！

Answer 1

這是我的解決方案，它涉及一種用於下一個元素作爲觸發（上點擊）的元件。

觸發器元素用類反映下一個容器（打開或關閉）的狀態。在啓動腳本檢查觸發器是否說的下一個元素應該是可見或不可見，然後應用，然後打開/關閉類到容器：

這裏是http://jsfiddle.net/7EWTG/

玩的JavaScript

提琴

jQuery(document).ready(function() { 

    jQuery('.toggle-next').each(function(index) { 
     var nextEl = jQuery(this).next(); 

     if(nextEl.is(':visible')) { 
      jQuery(this).addClass('open'); 
     } 
     else { 
      jQuery(this).removeClass('open'); 
     } 
    }); 

    jQuery('.toggle-next').on('click', function(event){ 
     var nextEl = jQuery(this).next(); 

     nextEl.toggle('fast', function() { 

      if(jQuery(this).is(':visible')) { 
       jQuery(this).prev().addClass('open'); 
      } 
      else { 
       jQuery(this).prev().removeClass('open'); 
      } 

     }); 
    }); 
}); // jQuery ready 

HTML

<p class="toggle-next">Toogle next content</p> 

    <div class="hide"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 

基本CSS

.hide { 
    display:none; 
} 
.toggle-next { 
    color:#000; 
    cursor:pointer; 
} 
.toggle-next.open{ 
    color:#0f0; 
} 

顯然，這並不使用同樣的方法爲你的。你將不得不使用CSS聲明來添加一個背景圖像到默認的.toggle-next狀態和.toggle-next.open，但是我覺得這樣更乾淨。

這當然不是完美的，但是一旦你有了這個系統，你可以重用它，你不必擔心「可切換」元素及其觸發器或它們各自的ID的初始狀態。

Answer 2

http://jsfiddle.net/HHguX/2/

<ul> 
    <li> 
<div class="toggle_head togglebackground"> 
    &nbsp;<img src="images/expand.png" alt="Expand" title="Expand" class="expand"> 
    &nbsp;<img src="images/collapse.png" alt="Collapse" title="Collapse" class="collapse"> 
    <label> Cookies</label> 
</div> 
<div class="box toggle_body"> 
    <ul class="list"> 
     <li> 
      <label disabled="disabled">Information about cookies.....</label> 
     </li> 
    </ul> 
</div> 
<!-- !END section (Cookies) --> 
</li> 
<li> 
<div class="toggle_head togglebackground"> 
    &nbsp;<img src="images/expand.png" alt="Expand" class="expand"> 
    &nbsp;<img src="images/collapse.png" alt="Collapse" class="collapse"> 
    <label> Terms</label> 
</div> 
<div class="box toggle_body"> 
    <ul class="list"> 
     <li> 
      <label disabled="disabled">Information about terms and conditions.....</label> 
     </li> 
    </ul> 
</div> 
<!-- !END section (Terms) --> 

</li> 
</ul> 

$(".toggle_body").hide(); 
$(".collapse").hide(); 

$(".toggle_head").click(function() { 

var $this = $(this); 

$this.next(".toggle_body").slideToggle(300, function() { 
    $this.children('img').toggle(); 
}); 

});