色彩活跃下拉列表中，同时其有效使用jQuery的父

问题描述 投票：-1回答：1

我在做一个网站，作为我班的一个项目（使用HTML，CSS，JavaScript的多为正则表达式和jQuery的效果）。我一直停留在事情是这样的：

我一直在试图颜色的立标记，这是积极的（它与在它1个li元素嵌套UL标签），说颜色是顶部和底部边框，颜色父李标签的文本并删除字体真棒的加和添加一个减号。因此，通过“默认”负处于隐藏状态，正处于活动状态，显示为红色，李父标签的文字是白色的，它的顶和底边框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固体红色重要末）。问题是，我怎么使用我现有的代码，实现了“不活跃”的方式;更精确地说，如果我打开另一个选项卡，我想在活动里标记的类被删除，并添加到其他（打开一个关闭的最后一个）。我曾尝试与代码摆弄;例如我尝试移动到$（本）切换，并去除后级的父，但结果我得到的是主动标签获取类=“” ......这让我相当困惑，也许我有一点对我的代码是如何工作的误解，我不知道，这就是我卡上;颜色，边界，从有源切换时改变正到负，反之亦然为无效等Sry基因为长柱

jquery html css3 colors html-lists
1个回答
0
投票

提示：使用类从弄不清列表，列表项和嵌套列表帮助。

$(".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>

Codepen

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.