javascript - 需要简化的 Javascript - 可折叠标签

Question

我编写了一些标签，它似乎运行良好，尽管我确信我可以使用更简洁的代码来实现这一点！我只是不确定现在该怎么做。我真的很感激这方面的一些帮助。

我不确定我想使用它的循环还是完全不同的东西？

我这样做的方式显然有效，但它似乎没有必要且混乱，在此之后下一步是在选项卡下降时添加过渡效果。我不确定这是否会允许我这样做。

function myFunction() {
  var a = document.getElementById("results1");
  var b = document.getElementById("results2");
  var c = document.getElementById("results3");
  var d = document.getElementById("title1"); 
  var e = document.getElementById("title2"); 
  var f = document.getElementById("title3"); 
  if (a.style.display === "none") {
    a.style.display = "block";
    b.style.display = "none";
    c.style.display = "none";
    d.style.backgroundColor = "#005FAA";
    e.style.backgroundColor = "lightgrey";
    f.style.backgroundColor = "lightgrey";
  } 
  else {
    a.style.display = "none";
    d.style.backgroundColor = "lightgrey";
  }
}

function myFunction1() {
  var a = document.getElementById("results1");
  var b = document.getElementById("results2");
  var c = document.getElementById("results3");
  var d = document.getElementById("title1"); 
  var e = document.getElementById("title2"); 
  var f = document.getElementById("title3"); 
  if (b.style.display === "none") {
    a.style.display = "none";
    b.style.display = "block";
    c.style.display = "none";
    d.style.backgroundColor = "lightgrey";
    e.style.backgroundColor = "#005FAA";
    f.style.backgroundColor = "lightgrey";
  } 
  else {
    b.style.display = "none";
    e.style.backgroundColor = "lightgrey";
  }
}

function myFunction2() {
  var a = document.getElementById("results1");
  var b = document.getElementById("results2");
  var c = document.getElementById("results3");
  var d = document.getElementById("title1"); 
  var e = document.getElementById("title2"); 
  var f = document.getElementById("title3"); 
  if (c.style.display === "none") {
    a.style.display = "none";
    b.style.display = "none";
    c.style.display = "block";
    d.style.backgroundColor = "lightgrey";
    e.style.backgroundColor = "lightgrey";
    f.style.backgroundColor = "#005FAA";
  } 
  else {
    c.style.display = "none";
    f.style.backgroundColor = "lightgrey";
  }
}

body{
margin: 10px;}

.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}


.title:last-child{
margin-right:0px;
width:32%;}

.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}

<div class="container">
    <div id="title1" class="title" onclick="myFunction()">
        <h4>Item 1</h4>
    </div> 
    <div id="title2" class="title" onclick="myFunction1()">
        <h4>Item 2</h4>
    </div> 
    <div id="title3" class="title" onclick="myFunction2()">
        <h4>Item 3</h4>
    </div> 
</div>


<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>

标签： javascripthtmlcsscollapse

Answer 1

也许是这样的？您已经在使用 JQuery，因此可以将其模块化并使用它来帮助您实现向下转换效果（如果您愿意，您也可以向上转换它们）。

const tabs = {
  animating: false,
  toggleResults: function(thatTab) {
    const thatResult = $(`[data-title="${thatTab.attr('id')}"]`);
    thatTab.toggleClass('activeTab');
    thatResult.toggleClass("openedResult");
    tabs.animating = true;
    thatResult.slideToggle("fast", function() {
      tabs.animating = false;
    });
  },
  init: function() {
    $(".title").click(function() {
      const thatTab = $(this);
      const openedResult = $('.openedResult');
      const thatTabId = thatTab.attr("id");
      const openedResultTitle = openedResult.data('title');

      if (!tabs.animating) {
        $('.activeTab').removeClass('activeTab');
        openedResult.removeClass('openedResult').hide();
        if (thatTabId !== openedResultTitle) {
          tabs.toggleResults(thatTab);
        }
      }
    });
  }
};

$(function() {
  tabs.init();
});

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.title {
  background-color: lightgrey;
  flex-basis: 32%;
  transition: background-color 0ms;
  text-align: center;
  color: white;
  padding: 30px;
  box-sizing: border-box;
}

.activeTab {
  background-color: #005faa;
  transition: background-color 100ms;
}

.results {
  background-color: #005faa;
  display: none;
  width: 100%;
  color: white;
  padding: 30px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div id="title1" class="title">
    <h4>Item 1</h4>
  </div>
  <div id="title2" class="title">
    <h4>Item 2</h4>
  </div>
  <div id="title3" class="title">
    <h4>Item 3</h4>
  </div>
</div>


<div class="results" data-title="title1">Item 1</div>
<div class="results" data-title="title2">Item 2</div>
<div class="results" data-title="title3">Item 3</div>