演示

Question

我有一个三面板手风琴，当用户单击页面上的链接时，它将打开他们单击的任何手风琴链接名称。手风琴在关闭时还有一个+ glyhpicon，然后在打开时有一个-glyhpicon表示“打开”或“关闭”。...我的问题是，当他们单击链接以添加“打开”时，每个glyhpicon都会改变，而不仅仅是一个在说第三个面板。

我有基本的jquery选择器，但没有正负功能

JQUERY：

  $('.scrollLink').click(function(){
        $('#panel3').addClass('collapse in');
        $('.glyphicon').addClass('glyphicon-minus');
    });

HTML：

<a href="#panel1" class="scrollLink">Test</a>
<a href="#panel2" class="scrollLink">Test</a>
<a href="#panel3" class="scrollLink">Test</a>

其中一个面板HTML：

<h4 class="panel-title"> <a href="#panel2" id="#panel2" 
  data-parent="#accordion" data- 
toggle="collapse" class="accordion-toggle" aria-expanded="true"><i 
 class="floatright glyphicon glyphicon-minus"></i><b>Breathe</b> . 
 </a> </h4>

Answer 1

也许您可以尝试一下。

首先，首先清除所有滚动链接中的折叠和glyphicon-minus，然后将其折叠中的折叠和glyphicon-minus添加到选定的滚动链接。

    $('.scrollLink').click(function(){
        $(.scrollLink).removeClass('collapse in');
        $(.scrollLink).children(".glyphicon").removeClass('glyphicon-minus');
        $(this).addClass('collapse in');
        $(this).children(".glyphicon").addClass('glyphicon-minus');
    });

Answer 2

我认为这可以满足您的需求。请注意，我为每个标题都调整了您的id，因为它们实际上不应该带有'＃'。下面的几行是关键部分，所有jquery在下面的演示中均已注释。

// Determine panel id from href
panel = $(this).attr("href");

// Add the -minus class to the correct panel
$(panel).find('.glyphicon').addClass('glyphicon-minus');

我不确定为什么会有以下一行，您不应该针对特定的面板，而应针对当前处于活动状态的面板。

$('#panel3').addClass('collapse in');

希望这会有所帮助，让我知道这是否不是您想要的。

演示

$('.scrollLink').click(function() {

  // Why are you doing this to a specific tab?
  // You should make this generic and add it to only the panel that is currently active
  $('#panel3').addClass('collapse in');
  
  // Remove current -minus classes
  $(".glyphicon-minus").removeClass("glyphicon-minus");

  // Determine panel id from href
  panel = $(this).attr("href");

  // Add the -minus class to the correct panel
  $(panel).find('.glyphicon').addClass('glyphicon-minus');

});

.glyphicon-minus {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#panel1" class="scrollLink">Test</a>
<a href="#panel2" class="scrollLink">Test</a>
<a href="#panel3" class="scrollLink">Test</a>

<h4 class="panel-title">
  <a href="#panel1" id="panel1" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" aria-expanded="false">
    <i class="floatright glyphicon">x</i> <b>Panel 1</b>
  </a>
</h4>

<h4 class="panel-title">
  <a href="#panel2" id="panel2" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" aria-expanded="true">
    <i class="floatright glyphicon">x</i> <b>Panel 2</b>
  </a>
</h4>

<h4 class="panel-title">
  <a href="#panel3" id="panel3" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" aria-expanded="false">
    <i class="floatright glyphicon">x</i> <b>Panel 3</b>
  </a>
</h4>

仅选择一个元素jQuery

2 个答案:

演示