开发者

accordion menu plus minus image issue

开发者 https://www.devze.com 2023-04-05 20:55 出处:网络
I have done accordion menu with plus and minus images. My problem is plus and minus will not work properly .

I have done accordion menu with plus and minus images. My problem is plus and minus will not work properly .

html code:

<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>

Here i have used this 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();     
     }

Is there any problem with my code?

if yes, Please tell me how to rectify it.

Thanks.


The selectors $('.min') and $('.plu') affect all the plus and minus signs on the page, not just the one you just toggled. You probably should use $(this) to select the correct plus/minus sign to toggle but it's hard to say without seeing your HTML structure.


You definitely need more context than that. If I could take a total shot in the dark, I'd say you might be mixing up the $(this).next:

You're using a callback function() on $(this).next so that becomes the new "this" reference.

0

精彩评论

暂无评论...
验证码 换一张
取 消