問題與自定義手風琴

我想強調所選手風琴選項卡的背景下，它的工作，但選擇的手風琴標籤的CSS不會改變選擇其它選項卡問題與自定義手風琴

的代碼和CSS是如下

<script type="text/javascript"> 

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

       //Expand or collapse this panel 
       $(this).next().slideToggle('slow'); 
       $(this).css({ "background-color": "#191970" }); 

       //Hide the other panels 
       $(".accordion-content").not($(this).next()).slideUp('slow'); 
       $(".accordion-content").not($(this)).css({ "background-color": "#E4E4E4" }); 

      }); 
     }); 

    </script> 
    <style type="text/css"> 
      #accordion{width:20%; float:left; height:100%; overflow:hidden; } 
      .accordion-toggle {cursor: pointer; background:#E4E4E4; line-height:35px; font-size:1em; padding-left:0.3em; color:#0f5595; } 
      .accordion-toggle img{ padding-right:0.4em; padding-top:0.3em;} 
      .accordion-content {display: none; float:none; } 
      .accordion-content.default {display: list-item; } 
      .accordion-content.contact{ display: list-item;} 
    </style>

根據我的問題是下面的語句：

$(".accordion-content").not($(this)).css({ "background-color": "#E4E4E4" });

他HTML是作爲

  <div id="accordion"> 

       <h4 class="accordion-toggle"> <img src="images/link.gif" /> first element</h4> 
        <div class="accordion-content default"> 
         <ul> 
          <li><a href="index.html"> Security</a></li> 
          <li><a href="index.html"> Security</a></li> 
         </ul> 
        </div> 

       <h4 class="accordion-toggle"> <img src="images/link.gif" /> second element</h4> 
        <div class="accordion-content"> 
        <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
        </div> 
</div>

Js Fiddle link

來源

2014-01-27 user3237190

我是新來的Jquery，首先，我盡我所能來解決它自己 – user3237190

什麼問題？是否有任何錯誤產生？什麼不工作？ [您是否調試過Javascript]（http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code）？ – Liam

首先點擊的手風琴的元素他們也保留選定的元素的顏色 – user3237190

我覺得我得到你現在，你需要重新設置背景顏色在您的jQuery：

$(document).ready(function ($) { 
     $('#accordion').find('.accordion-toggle').click(function() { 
      //stop us reusing $(this) as it's not efficent 
      var $this = $(this); 

      //First things first, reset all the accordion's colours back to default 
      $("#accordion .accordion-toggle").css('background-color', '#E4E4E4'); 
      //Expand or collapse this panel 
      $this.next().slideToggle('fast'); 

      //now set only the correct one to the new colour 
      $this.css("background-color", "#191970"); 

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

Updated fiddle

來源

2014-01-27 11:02:18 Liam

好教訓，我希望通過這個我會發表較少的問題，謝謝Liam – user3237190

只要發佈問題沒有錯，他們很好解釋:)很高興它有幫助。 – Liam

它不是重複使用$(this)一個好主意;請嘗試以下操作：

$this = $(this);

然後使用您的$this變量。

此外，您綁定點擊(".accordion-toggle")元素，因此$(this)是.accordion-toggle。但是，然後你檢查一組$(".accordion-content").not($(this))。這幾個類是否在同一組元素上？

來源

2014-01-27 10:24:54 Eternal1

http://jsfiddle.net/6Qd78/ – user3237190

只想選中/展開的手風琴元素只能高亮 – user3237190

問題與自定義手風琴

回答

相關問題