меню аккордеон плюс минус проблема с изображением

Я сделал аккордеонное меню с изображениями плюс и минус. Моя проблема в том, что плюс и минус не будут работать должным образом.

html-код:

<div class="rightTitle">
<div class="multiAccordion" onclick="acc('acc0')" id="acc0">
<h3 class="rt">January</h3>
<div class="arrow"><a href="#"><img src="images/plus.png" alt="dropArrow" class="plu"/><img src="images/minus.png" alt="dropArrow" class="min" style="display:none;" /></a></div>
</div>
<div class="leaveDetails" style="display:none;">
<ul>
<li>15, Monday - <strong>Independence Day</strong></li>
<li>15, Monday - <strong>Independence Day</strong></li>
</ul>
</div>
</div>
<div class="rightTitle bt">
<div class="multiAccordion" onclick="acc('acc1')" id="acc1">
<h3 class="rt">Febuary</h3>
<div class="arrow"><a href="#"><img src="images/plus.png" alt="dropArrow" class="plu"/><img src="images/minus.png" alt="dropArrow" class="min" style="display:none;" /></a></div>
</div>
<div class="leaveDetails" style="display:none;">
<ul>
<li>15, Monday - <strong>Independence Day</strong></li>
<li>15, Monday - <strong>Independence Day</strong></li>
</ul>
</div>
</div>
<div class="rightTitle bt">
<div class="multiAccordion" onclick="acc('acc2')" id="acc2">
<h3 class="rt">March</h3>
<div class="arrow"><a href="#"><img src="images/plus.png" alt="dropArrow" class="plu"/><img src="images/minus.png" alt="dropArrow" class="min" style="display:none;" /></a></div>
</div>
<div class="leaveDetails" style="display:none;">
<ul>
<li>15, Monday - <strong>Independence Day</strong></li>
<li>15, Monday - <strong>Independence Day</strong></li>
</ul>
</div>
</div>
<div class="rightTitle bt">
<div class="multiAccordion" onclick="acc('acc3')" id="acc3">
<h3 class="rt">April</h3>
<div class="arrow"><a href="#"><img src="images/plus.png" alt="dropArrow" class="plu"/><img src="images/minus.png" alt="dropArrow" class="min" style="display:none;" /></a></div>
</div>
<div class="leaveDetails" style="display:none;">
<ul>
<li>15, Monday - <strong>Independence Day</strong></li>
<li>15, Monday - <strong>Independence Day</strong></li>
</ul>
</div>
</div>

Здесь я использовал этот jquery,

   $(".multiAccordion").bind('click', function() {
    $(this).next().toggle('slow', function() {
     var a = $(this).next();
     if (($(this).next()).is(':hidden'))//Please check whether if condition is rite or not 
     {
      alert('hi')
      $('.min').show();
      $('.plu').hide();
     } else {
       alert('bye')
      //$(this).next().hide('slow');         
      $('.min').hide();
      $('.plu').show();     
     }

Есть ли проблема с моим кодом?

если да, то подскажите как исправить.

Спасибо.


person Mr.T.K    schedule 20.09.2011    source источник


Ответы (2)


Селекторы $('.min') и $('.plu') влияют на все знаки плюс и минус на странице, а не только тот, который вы только что переключили. Вероятно, вам следует использовать $(this) для выбора правильного знака плюс/минус для переключения, но трудно сказать, не видя структуру вашего HTML.

person Kaivosukeltaja    schedule 20.09.2011

Вам определенно нужно больше контекста, чем это. Если бы я мог сделать общий снимок в темноте, я бы сказал, что вы, возможно, перепутали $(this).next:

Вы используете функцию обратного вызова() для $(this).next, чтобы она стала новой ссылкой "this".

person Morgan Delaney    schedule 20.09.2011