Question

使用最少的代码进行非常简单的jQuery切换。问题是我只希望应用于切换符号的切换行为作为背景CSS图像应用于位于最右侧的p元素。现在它适用于整个元素。标题是一个超链接，因此当它被点击时，它会在转到新网址之前开始执行切换。

HTML代码就是这样：

  <ul>
    <li>
      <p class="accordion-toggle dormantState"><a href="http://google.com">Q ANZAC 100</a></p>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </li>
    <li>
      <p class="accordion-toggle dormantState"><a href="http://google.com">Business studio</a></p>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </li>
    <li>
      <p class="accordion-toggle dormantState"><a href="http://google.com">The Edge</a></p>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </li>
</ul>

CSS：

.accordion-toggle {cursor: pointer; width: 80%; }
.activeState { background-image: url(../img/minus-icon.png)!important; background-position: right center; background-repeat: no-repeat; }
.dormantState { background-image: url(../img/plus-icon.png); background-position: right center; background-repeat: no-repeat; }
.accordion-content {display: none; border: 1px solid: #ccc; width: 70%; }

JS：

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

    $('.accordion-toggle').removeClass('activeState');
    if($(this).parent().find('.accordion-content').css('display')=='none'){
       $(this).addClass('activeState');
    }

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

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

    });
  });

我试图在关闭标签后创建一个span标签，并将accordian toggle类应用于它并重构我的JS代码（使用.parent语法），但我想我只是把它变得太复杂了为自己挖洞。通过调整JS代码，有一个简单的解决方案吗？

Answer 1

好的，我自己设法解决了这个问题。不得不重新安排代码。使用具有图像背景的类别抛弃并使用span元素。

HTML code：

<ul>
  <li>
    <p class="accordion-toggle dormantState"><a href="http://qanzac100.slq.qld.gov.au">Q ANZAC 100</a><span class="toggleIcon">+</span></p>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </li>
  <li>
    <p class="accordion-toggle dormantState"><a href="#">Business studio</a><span class="toggleIcon">+</span></p>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </li>
  <li>
    <p class="accordion-toggle dormantState"><a href="http://edgeqld.org.au/">The Edge</a><span class="toggleIcon">+</span></p>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </li>
  <li>
</ul>

JS代码：

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

  //Expand or collapse this panel
  $(this.parentNode).next().slideToggle('fast');

    // Determine if it's open or closed
    var toggleState = $(this).html();
    if (toggleState=="+") {
        $(this).html("-");
    } else if (toggleState=="-") {
        $(this).html("+")
    }

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

    //Find change the icon of any open panels back to closed
    if($('.otherSites').find('.accordion-content span').html("-")){
        console.log("make all other toggles go to +");
        $(".toggleIcon").not($(this)).html("+")
    }
});
});

对JS代码并不是100％满意，并且必须给span元素一个类，但是它可以完成这项工作。

简单的jQuery切换标题中的图标

1 个答案: