Question

我试图在列表组中更改V形符号的方向，以便在单击/激活时指向内部。但是根据下面的代码我只能让第一个V形改变方向。我正在循环菜单中的项目代码（包括雪佛龙），所以我需要找到一种方法让菜单中的每个项目都有这个功能镜像。

我意识到这很可能是因为js的目标是ID。但是，如果我更改代码以使directionToggle反映一个类......它会同时更改所有箭头。

我如何单独执行此操作，因为我使用php来循环每个菜单项的行为？

＆＃13;

<?php foreach ($tasks as $number => $name) { ?>
  <?php $is_heading = ends_with($name, ':'); ?>
    <?php if (!$is_heading): ?>
       <li class="list-group-item" tabindex="-1">
         <a class="listgroupwrap" href="#<?= $task_slugs[$number] ?>"></a>
         <span class="step-number-container"> <?= $number + 1 ?></span>
         <span class="btn-check">
            <i class="glyphicon glyphicon-ok"></i>
         </span>
         <span class="step-checkbox"></span>
         <span class="step-name content-blurred"><?= $name ?></span>
         <span class="step-show-hide">
           <span class="btn btn-showhide">
              <i class="glyphicon glyphicon-chevron-right" id="direction-toggle">
              </i>
           </span>
         </span>
       </li>
     <?php else: ?>
      <li class="list-group-item step-heading" tabindex="-1">
        <a class="listgroupwrap" href="#<?= $task_slugs[$number] ?>">
        </a>
        <span class="step-number-container"> <?= $number + 1 ?></span>
		<span class="step-name content-blurred"><?= $name ?>
        </span>
      </li>

      <?php endif ?>
<?php } ?>

＆＃13;

var rightChevron = $('.glyphicon-chevron-right');
    var directionToggle = $('#direction-toggle');

    var fullscreenButton = $('.btn-showhide');
    fullscreenButton.click(function () {
        $('body').toggleClass('fullscreen');
        directionToggle.addClass('glyphicon-chevron-left');
        directionToggle.toggleClass('glyphicon-chevron-right');
    });

＆＃13;

Answer 1

如果您尝试设置多个方向切换，则需要将其设为类。作为ID，JQuery只获得第一个。一旦它成为一个类，使用Jquery的.each（）函数：

$('.direction-toggle').each(function(){
    $(this).addClass(//class);
});

在点击活动中。

编辑：根据评论，您似乎想要在任何时候更改1箭头的方向，无论哪一个被点击。这是你想要做的：

$('.btn-showhide').click(function(){
    $(this).children().addClass(//class).
});

Answer 2

@cruiser的解决方案效果很好，但是我无法立即改变箭头方向。在侧边栏扩展到全屏后我才能这样做。

此解决方案立即为我工作。

$（＆＃39; .btn-显示隐藏＆＃39）。单击（函数（）{ $（本）.find（＆＃39;我＆＃39;）。toggleClass（＆＃39; glyphicon右箭头＆＃39;）。toggleClass（＆＃39; glyphicon左箭头＆＃39;）; }）;

当试图在JS中单击时改变V形方向时，只有1个V形变化。

2 个答案: