Question

我只需要显示所选标签的内容。

您可以在那支笔https://codepen.io/Laurentfrom47/pen/mYJZVx中看到我的代码

$(document).ready(function(){
    $("li.list-items").children(".item-details").hide();
    $(".list-items").click(function(){
        $(this).children("div").toggle(50);
        icon = $(this).find("span");
        icon.toggleClass("icon");
    });
});

Answer 1

隐藏活动中的其他内容。

$(document).ready(function(){
    $("li.list-items").children(".item-details").hide();
    $(".list-items").click(function(){
        $("li.list-items").children(".item-details").hide(); // hide content
        $("li.list-items").find("span.icon").toggleClass("icon"); // close tab
        $(this).children("div").toggle(50);
        icon = $(this).find("span");
        icon.toggleClass("icon");
    });
});

Answer 2

我刚刚重写了您的Script部分。检查它是否满足您的目标。

$(document).ready(function(){
  $("li.list-items").children(".item-details").hide();        
  $(".list-items").click(function(e){
    if($(this).children("div").css('display') == "block"){
      $(this).children("div").toggle(80);
      icon = $(this).find("span");
      icon.toggleClass("icon");
    }
    else{
      $(".list-items").each(function(){          
        $(this).children('div').hide();
        $(this).find("span").removeClass('icon');
      });
      $(this).children("div").toggle(80);
      icon = $(this).find("span");
      icon.toggleClass("icon");
    }
  });
});

Answer 3

检查单击的LI的div是否可见并相应显示/隐藏

$(document).ready(function() {
  $("li.list-items").children(".item-details").hide();
  $(".list-items").click(function() {
    $("li.list-items").children("div.item-details").hide(50);
    $(this).children("div.item-details").is(":visible") ? $(this).children("div.item-details").hide(50) : $(this).children("div.item-details").show(50); //show hide according to div's visiblitiy
    $(".list-items").removeClass('icon')
    icon = $(this).find("span");
    icon.hasClass("icon") ? icon.removeClass("icon") : icon.addClass("icon"); //show hide according to div's visiblitiy
  });
});

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding-left: 0;
}

ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.hide {
  display: none
}

.list-items {
  margin: 5px 0;
  cursor: pointer;
  .head {
    display: block;
    background-color: #dedede;
    padding: 10px;
    span {
      float: right;
      color: green;
      &.icon {
        color: red;
      }
    }
  }
  .item-details {
    padding: 10px 20px;
    position: absolute;
    left: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="list-items">
    <a class="head">Tab 1 <span>icon</span></a>
    <div class="item-details">
      Hi you are in Tab 1
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae urna fermentum, tempus leo sit amet, accumsan nunc. Maecenas scelerisque elementum lectus, vitae tempus ante pretium et. Aliquam blandit enim et dolor consectetur, quis accumsan
        nisi facilisis. In ut arcu ex. Donec id turpis cursus, gravida urna pharetra, suscipit odio. Sed malesuada quam vel felis vestibulum venenatis. Duis magna arcu, ultricies ac libero quis, ultricies venenatis ex. Duis imperdiet venenatis eros, placerat
        congue lectus. Proin interdum nisi eu luctus pharetra. Nunc molestie commodo purus, dapibus sagittis neque tristique ac. Phasellus ullamcorper tincidunt lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Suspendisse potenti. Etiam quis orci efficitur, volutpat enim vitae, cursus magna. Curabitur viverra tortor quis dolor bibendum luctus. Phasellus et risus ac turpis blandit ornare.</p>

    </div>
  </li>

  <li class="list-items">
    <a class="head">Tab 2 <span>icon</span></a>
    <div class="item-details">
      Hi you are in Tab 2
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae urna fermentum, tempus leo sit amet, accumsan nunc. Maecenas scelerisque elementum lectus, vitae tempus ante pretium et. Aliquam blandit enim et dolor consectetur, quis accumsan
        nisi facilisis. In ut arcu ex. Donec id turpis cursus, gravida urna pharetra, suscipit odio. Sed malesuada quam vel felis vestibulum venenatis. Duis magna arcu, ultricies ac libero quis, ultricies venenatis ex. Duis imperdiet venenatis eros, placerat
        congue lectus. Proin interdum nisi eu luctus pharetra. Nunc molestie commodo purus, dapibus sagittis neque tristique ac. Phasellus ullamcorper tincidunt lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Suspendisse potenti. Etiam quis orci efficitur, volutpat enim vitae, cursus magna. Curabitur viverra tortor quis dolor bibendum luctus. Phasellus et risus ac turpis blandit ornare.</p>
    </div>
  </li>
  <li class="list-items">
    <a class="head">Tab 3 <span>icon</span></a>
    <div class="item-details">
      Hi you are in Tab 3
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae urna fermentum, tempus leo sit amet, accumsan nunc. Maecenas scelerisque elementum lectus, vitae tempus ante pretium et. Aliquam blandit enim et dolor consectetur, quis accumsan
        nisi facilisis. In ut arcu ex. Donec id turpis cursus, gravida urna pharetra, suscipit odio. Sed malesuada quam vel felis vestibulum venenatis. Duis magna arcu, ultricies ac libero quis, ultricies venenatis ex. Duis imperdiet venenatis eros, placerat
        congue lectus. Proin interdum nisi eu luctus pharetra. Nunc molestie commodo purus, dapibus sagittis neque tristique ac. Phasellus ullamcorper tincidunt lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Suspendisse potenti. Etiam quis orci efficitur, volutpat enim vitae, cursus magna. Curabitur viverra tortor quis dolor bibendum luctus. Phasellus et risus ac turpis blandit ornare.</p>
    </div>
  </li>
</ul>

隐藏其他标签的内容，仅显示所选标签的内容

3 个答案: