Question

我使用以下简单的jQuery slideToggle滑动内容和子内容。

$(document).ready(function () {
    $(".button").on('click', function () {
        $(this).next('.panel').slideToggle(500);
        $(this).toggleClass('active');
    });
});

.panel{ 
 width: 100%;
 padding-left: 0%;
 overflow: hidden;
 display:none;
}


.button:hover, .content:hover {
 background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">
Open Content
</div>
  <div class="panel">
  <div class="content"> content 1 </div>
  <div class="content"> content 2 </div>
  <div class ="button"> content 3 </div>
    <div class="panel">
    <div class="content"> content 3a </div>
    <div class="content"> content 3b </div>
    <div class="content"> content 3c </div>
    <div class="content"> content 3d </div>
   </div>   
  </div>

您还可以在jsfiddle here中找到所有代码。
到目前为止，所有这些工作正常。

现在，如您在我的代码中看到的那样，当光标移到某个元素上时，我将鼠标悬停在blue中的内容。我现在的目标是，当用户打开content 3下方的面板时，只要用户在{{}中使用光标导航，<div>的{{1}}就会停留在content 3中。 1}}。

要实现此目的，我需要在代码中进行哪些更改？

Answer 1

活动CSS选择器

您需要添加active CSS选择器

.active {
 background: #2b5eae;
 color:#fff;
}

$(document).ready(function () {
    $(".button").on('click', function () {
        $(this).next('.panel').slideToggle(500);
        $(this).toggleClass('active');
    });
});

body {padding:20px;}
section {
width:300px;
border: 1px solid #555;
overflow:hidden;
padding:10px 15px;
}
.panel{ 
 width: 100%;
 padding-left: 0%;
 overflow: hidden;
 display:none;
}
.button {
padding:10px 15px;
margin-bottom:10px;
margin-top:10px;
}
.content, .button {border-radius:4px;}
.content {padding:5px 12px;}
.button:hover, .content:hover {
 background: #2b5eae;
 color:#fff;
}
.active {
 background: #2b5eae;
 color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<section>
<div class="button">
Open Content
</div>
  <div class="panel">
  <div class="content"> Content 1 </div>
  <div class="content"> Content 2 </div>
  <div class ="button"> Open Content 2 </div>
  <div class="panel">
  <div class="content"> Content 3a </div>
  <div class="content"> Content 3b </div>
  <div class="content"> Content 3c </div>
  <div class="content"> Content 3d </div>
   </div>   
  </div>
  </section>
</body>

Answer 2

$(document).ready(function () {
    $(".button").on('click', function () {
        $(this).next('.panel').slideToggle(500);
        $(this).toggleClass('active');
    });
});

.panel{ 
 width: 100%;
 padding-left: 0%;
 overflow: hidden;
 display:none;
}


.button:hover, .content:hover {
 background: blue;
}
.active {
 background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">
Open Content
</div>
  <div class="panel">
  <div class="content"> content 1 </div>
  <div class="content"> content 2 </div>
  <div class ="button"> content 3 </div>
    <div class="panel">
    <div class="content"> content 3a </div>
    <div class="content"> content 3b </div>
    <div class="content"> content 3c </div>
    <div class="content"> content 3d </div>
   </div>   
  </div>

子内容打开时内容仍悬停

2 个答案:

活动CSS选择器