Question

我有一个带有一系列li的侧面导航ul菜单，目前用于演示目的。

第一个自动使用activeDot类，当点击另一个时，新点使用此类，从先前选择的点中删除该类，但是我遇到一个问题，一旦新点使用activeDot类而另一个点是单击后，该类不会从之前单击的点中删除。我一次只能激活一个点，我试图将其实现到我的jQuery中。

编辑：好的，现在我发现jQuery在JSFiddle中实际上并不工作，即使它是相同的代码。

JSFiddle：https://jsfiddle.net/Lusru678/。

JS：

$(document).ready(function() {

    var currentDot = $('#aboutSideNav > ul > li.activeDot');

    $('#aboutSideNav > ul > li').click(function() {

        $(this).addClass('activeDot');
        currentDot.removeClass('activeDot');

    });  

    $('#aboutSideNav > ul > li.activeDot').click(function() {

        $(this).addClass('activeDot');

    });

});

HTML：

<div id="aboutSideNav" class="sideNav" style="margin-top:-100px">

    <ul>

        <li class="activeDot"></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

CSS：

.sideNav
{
position:absolute;
width:auto;
top:0;
right:0;
height:100%;
z-index:99;
display:flex;
align-items:center;
}

.sideNav > ul
{
margin:0;
padding:0;
}

.sideNav > ul > li
{
position:relative;
display:block;
margin:25px 30px;
width:4px;
height:4px;
cursor:pointer;
background:#fff;
border:2px solid #fff;
border-radius:50%;
transition:all linear 0.3s;
-webkit-transition:all linear 0.3s;
-moz-transition:all linear 0.3s;
}

@media only screen
and (max-width: 768px)
{
.sideNav > ul > li
{
    width:8px;
    height:8px;
}
}

.sideNav > ul > li.activeDot
{
background:transparent;
}

.sideNav > ul > li:hover
{
background:transparent;
border:2px solid #fff;
}

Answer 1

你只需要再制作一行

一次只能激活一个点

发生

$(document).ready(function() {
     var currentDot = $('#aboutSideNav > ul > li.activeDot');

$('#aboutSideNav > ul > li').click(function() {
    $('li.activeDot').removeClass('activeDot'); // this line
    $(this).addClass('activeDot');
   // currentDot.removeClass('activeDot');//no longer needed

});  

  /*  $('#aboutSideNav > ul > li.activeDot').click(function() {

    $(this).addClass('activeDot'); // this li has class activeDot - why do you need this?

   });*/

});

现在作为一个班轮

 $('#aboutSideNav > ul > li').click(function() {
    $(this).addClass('activeDot').siblings().removeClass('activeDot'); 
})

原始元素不包含在兄弟姐妹中，当我们希望在DOM树的特定级别找到所有元素时，这一点很重要

来自https://api.jquery.com/siblings/

Answer 2

尝试这个，

$(document).ready(function() {

    var currentDot = $('#aboutSideNav > ul > li.activeDot');

    $('#aboutSideNav ul li').click(function() {

        $(this).addClass('activeDot');
        $('#aboutSideNav ul li').not(this).removeClass('activeDot');

    });  



});

Answer 3

鉴于上述要求，我建议：

// binding the anonymous function of the on() method as the
// 'click' event-handler:
$('#aboutSideNav > ul > li').on('click', function(){

  // adds the activeDot class to the clicked element,
  // removes the activeDot class from all sibling elements:
  $(this).addClass('activeDot').siblings().removeClass('activeDot');
});

大规模简化的演示（减少选择器的过度特异性，以及隐藏大多数style元素的#aboutSideNave元素中<li>属性的奇怪使用没有明显的理由）：

$(document).ready(function() {

  var currentDot = $('#aboutSideNav > ul > li.activeDot');

  $('#aboutSideNav > ul > li').click(function() {

    $(this).addClass('activeDot');
    currentDot.removeClass('activeDot');

  });

  $('#aboutSideNav > ul > li.activeDot').click(function() {

    $(this).addClass('activeDot');

  });

});

li {
  display: block;
  margin: 25px 30px;
  width: 2em;
  height: 2em;
  cursor: pointer;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
}
li.activeDot {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aboutSideNav" class="sideNav">

  <ul>

    <li class="activeDot"></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

</div>

JS Fiddle demo

参考文献：

jQuery - 为li选择活动点并从其他人中删除活动类

3 个答案: