时间戳

首页 > 解决方案 > 使用 jQuery 为活动下拉列表的父级着色，同时它处于活动状态

jquery - 使用 jQuery 为活动下拉列表的父级着色，同时它处于活动状态

问题描述

我正在为我的班级制作一个网站作为一个项目（使用 HTML、CSS、JavaScript 主要用于正则表达式和 jQuery 用于效果）。我一直坚持的事情如下：

我一直在尝试为活动的 li 标签着色（它有一个嵌套的 ul 标签，其中包含 1 个 li 元素），说它的顶部和底部边框着色，为父 li 标签的文本着色并删除 Font Awesome 的加号和添加减号。因此，默认情况下，减号是隐藏的，加号是活动的并且是红色的，父 li 标签的文本是白色的，它的顶部和机器人边框是 1px 实心和灰色。当我单击它时，我希望它下拉（已经这样做了），删除红色加号，添加减号，将 li 标签的文本着色为红色，并使其边框为 2px 纯红色（顶部和底部）。 

<div id="wrapperFAQ">
        <h2 id="h2FAQ">Frequently Asked Questions</h2>

        <ul id="listaPitanja">

            <li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Who are we?
                <ul>
                    <li>You can find more about us on our <a href="#">about us</a> page.</li>
                </ul>
            </li>
            <li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> What products do we have?
                <ul>
                    <li>a</li>
                </ul>
            </li>
            <li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> I have a hardware issue!
                <ul>
                    <li></li>
                </ul>
            </li>
            <li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Where can I find your shop?

                <ul>
                    <li></li>
                </ul>
            </li>
            <li><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Will you have "x" products in the future?
                <ul>
                    <li></li>
                </ul>
            </li>



        </ul>

        <p>Can't find your question on the list? 
        Send us an <a href="#">e-mail!</a></p>

    </div>

这是 HTML，这是 CSS： 

#wrapperFAQ{
width: 80%;
padding:15px;
margin: 0px auto;
}

#h2FAQ{
font-size:4vw;
color:red;
float:left;
border-bottom:3px solid red;
border-left:5px solid red;
}

#listaPitanja{
float:left;
margin: 10px 20px;
padding: 5px 20px;

}
#listaPitanja li{
cursor:pointer;
border-top:1px solid gray;
border-bottom:1px solid gray;
padding: 15px;
}

.fa-minus::before,.fa-plus::before{
color:red;
}

#listaPitanja li ul,.fa-minus::before{
display:none;
}

#listaPitanja, #listapitanja li ul{
list-style:none;
width: 85%;
margin: 0px auto;
color:white;
margin: 10px 0px 0px 15px;
}

#listaPitanja li ul li{
border:none;

}

.activeTab{

display:block;
}

#wrapperFAQ p, #wrapperFAQ p a{
font-size:2vw;
color:gray;
font-weight:strong;
text-align:center;
text-decoration:none;
width: 69%;
}

.aktivna{
border-top: 2px solid red !important;
color: red;

}

这是 jQuery： 

$('#wrapperFAQ ul > li ul')
.click(function(e){
  e.stopPropagation();
})
.filter(':not(:first)')
.hide();

$('#wrapperFAQ ul li').click(function(){
var selfClick = $(this).find('ul:first').is(':visible');
if(!selfClick) {
  $(this)
    .parent()
    .find('> li ul:visible')
    .slideToggle();
    $(this).addClass("aktivna");
}

$(this)
  .find('ul:first')
  .stop(true, true)
  .slideToggle()



});

现在，我确实从我在网上找到的文件中复制了这个确切的代码，大部分我都理解，除了“stopPropagation”部分，它是“e”参数（甚至不知道它来自哪里）以及它应该做什么，因为当我删除它时，视觉上不会发生任何不想要的事情。

此外，您可以看到我确实将“aktivna”类添加到“活动”菜单中（CSS 中的类本身只有颜色：红色；边框顶部和底部设置为 2px 纯红色，末尾带有 !important）。问题是，我如何使用现有代码实现“非活动”方式？更准确地说，如果我打开另一个选项卡，我希望将活动 li 标签上的类删除并添加到另一个（打开一个关闭最后一个）。我确实尝试过摆弄代码；例如，我在切换 $(this) 并删除类后尝试移动到 $(this) 的父级，但我得到的结果是活动选项卡获取了 class=""...这让我很困惑，也许我是对我的代码如何工作有一点误解，我不知道，这就是我坚持的地方；颜色，边框，

标签： jqueryhtmlcsscolorshtml-lists

解决方案

提示：使用类来帮助避免对列表、列表项和嵌套列表感到困惑。

$(".toggleItem").click(function() {
  // Remove active class from sibling toggleItems
  $(this)
    .parent()
    .find(".toggleItem")
    .removeClass("aktivna");

  // Check if we have clicked on a toggleItem that has an open toggleList
  var selfClick = $(this)
    .find(".toggleList")
    .is(":visible");

  if (!selfClick) {
    // Close the open toggleList
    $(this)
      .parent()
      .find(".toggleList:visible")
      .slideToggle();

    // Add active class to the clicked toggleItem
    $(this).addClass("aktivna");
  }

  // Open / close to the clicked toggleItem's toggleList
  $(this)
    .find(".toggleList")
    .stop(true, true)
    .slideToggle();
});
#wrapperFAQ {
  width: 80%;
  padding: 15px;
  margin: 0px auto;
}

#h2FAQ {
  font-size: 4vw;
  color: red;
  float: left;
  border-bottom: 3px solid red;
  border-left: 5px solid red;
}

#listaPitanja {
  float: left;
  margin: 10px 20px;
  padding: 5px 20px;
}

#listaPitanja li {
  cursor: pointer;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 15px;
}

.fa-minus::before,
.fa-plus::before {
  color: red;
}

#listaPitanja li ul,
.fa-minus::before {
  display: none;
}

#listaPitanja,
#listapitanja li ul {
  list-style: none;
  width: 85%;
  margin: 0px auto;
  //color: white;
  margin: 10px 0px 0px 15px;
}

#listaPitanja li ul li {
  border: none;
}

.activeTab {
  display: block;
}

#wrapperFAQ p,
#wrapperFAQ p a {
  font-size: 2vw;
  color: gray;
  font-weight: strong;
  text-align: center;
  text-decoration: none;
  width: 69%;
}

.aktivna {
  border-top: 2px solid red !important;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapperFAQ">
  <ul id="listaPitanja">
    <li class="toggleItem"><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Who are we?
      <ul class="toggleList">
        <li>You can find more about us on our <a href="#">about us</a> page.</li>
      </ul>
    </li>
    <li class="toggleItem"><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> What products do we have?
      <ul class="toggleList">
        <li>a</li>
      </ul>
    </li>
    <li class="toggleItem"><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> I have a hardware issue!
      <ul class="toggleList">
        <li></li>
      </ul>
    </li>
    <li class="toggleItem"><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Where can I find your shop?
      <ul class="toggleList">
        <li></li>
      </ul>
    </li>
    <li class="toggleItem"><i class="fas fa-plus activeTab"></i><i class="fas fa-minus"></i> Will you have "x" products in the future?
      <ul class="toggleList">
        <li></li>
      </ul>
    </li>
  </ul>
  <p>Can't find your question on the list? Send us an <a href="#">e-mail!</a></p>
</div>

密码笔

推荐阅读