Question

您好我是javascript的新手，我正在尝试使用切换功能，不仅提供显示/隐藏功能，还切换箭头图标。例如，当链接显示更多时，旁边有一个右箭头＆＃34;更多 - ＆gt;＆＃34;当点击链接时，它会变为＆＃34; Less ^＆＃34;带有向上箭头。我使用icomoon字体表示右箭头和向上箭头。

到目前为止，这是我的代码，显示/隐藏功能正常，但我认为必须有更好的方法来切换箭头。当我第一次看到我的网站时，会出现箭头，但只要我点击该链接，箭头就会消失，我最终会看到HTML代码而不是箭头。我分享了一个链接，但我在身份验证后的沙盒中工作：

    // choose text for the show/hide link
    var showText='More' + ' <span class="icon-arrow-right2"></span>';
    var hideText='Less' + ' <span class="icon-arrow-up2"></span>';

    // append show/hide links to the element directly preceding the element   
    with a class of "toggle"
    $(".toggle").prev().append(' (<a href="#"  
    class="toggleLink">'+showText+'</a>)');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

   // capture clicks on the toggle links
   $('a.toggleLink').click(function() {

   // change the link text depending on whether the element is shown or hidden
   if ($(this).text()==showText) {
   $(this).text(hideText);
   $(this).parent().next('.toggle').slideDown('fast');
   }
   else {
   $(this).text(showText);
   $(this).parent().next('.toggle').slideUp('fast');
   }

我的CSS看起来像这样：

    /* Main toggle */
    .toggle { 
      font-size: 14px;
      line-height:20px;
      font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,   
      sans-serif;
      background: #ffffff; /* Main background */
      margin-bottom: 10px;
      padding:5px;
      border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

    /* Adding a right arrow to the More text */
    .icon-arrow-right2:before {
      content: "\ea3c";
    }

   /* Adding Up arrow to Less text */
    .icon-arrow-up2:before {
      content: "\ea3a";
    }

非常感谢您的时间和投入！

Answer 1

您可以使用toggle()和toggleClass()来处理更改内容以及点击方式。

例如：

// When the toggleLink is clicked, we'll toggle classes/text.
$('.toggleLink').click(function () {
    
    /*
      Check if the showText class also has the hide class. We can use that to
      toggle text. Another way to do this is use the :visible selector on what
      we are hiding and showing, like so:
        $('.showHide:visible')
    */
    if ($('.showText').hasClass('hide')) {
        /*
          We use .text() and not .html() here. If you want to place inline html,
          instead use .html(). The browser will render .text() this as plain text.
        */
        $('.showText').text("Less");
    } else {
        $('.showText').text("More");
    }
    
    /*
      Here, we use .toggleClass() two ways. If one class is specified, jQuery will
      remove and add the class accordingly. If two (or more!) classes are specified, 
      jQuery will instead swap between the two (or more!) accordingly.
    */
    $('.showText').toggleClass('hide');
    $('.showColor').toggleClass('more less');
  
    /*
      Using .toggle(), jQuery will hide or show the element. You can nest things
      in toggle as well, like a function to do other things too!
    */
    $('.showHide').toggle();
});

.more {
    color: green;
}
.less {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
    <div class="showText">Less</div> <a class="showColor less">Green=More, Red=Less</a>

    <br />
    <div class="showHide">Stuff</div>
</div>
<a href="#" class="toggleLink">Test</a>

上面的示例显示了toggle()和toggleClass()的一些用法，以及替换元素中的文本。我强烈建议您阅读jQuery在api documentation上可以做的所有有趣的事情，并推荐Code Academy来帮助获取JavaScript和其他语言的基础知识。

Answer 2

您应该使用toggleClass，只有1个span元素，如下所示：

<span class="toggleIcon icon-arrow-right2"></span>

$('.toggleIcon').toggleClass('icon-arrow-right2 icon-arrow-up2');

JQuery切换图标

2 个答案: