javascript - 如何在幻灯片切换中先隐藏div并在单击时显示？

Question

如何首先隐藏幻灯片切换中的 div 标签？我尝试在'.accordion_box'中显示:none并在slideToggle中显示()它，但问题是它会添加一个作为显示 block 的css属性。我正在尝试从左到右创建一个 Accordion 幻灯片。

$(".slide-toggle").click(function(){
		$(".accordion_box").animate({
			width: "toggle"
		});
	});

#about .about_content .accordion_content {
  font-size: 0;
  min-height: 700px;
  padding-top: 50px;
  text-align: left;
}

#about .about_content .accordion_content .accordion_box, #about .about_content .accordion_content .accordion_toggle {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
}

#about .about_content .accordion_content .accordion_box {
  background: blue;
  min-height: 200px;
  width: 90%;
}

#about .about_content .accordion_content .accordion_toggle a.slide-toggle {
  display: block;
  width: 50px;
  height: 200px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <div id="about">
            <div class="wrapper">
                <div class="about_content">
                    <h3>About Us</h3>
                    
                    <div class="accordion_content">
                        <div class="accordion_box">

                        </div>
                        <div class="accordion_toggle"><a href="#about" class="slide-toggle"></a></div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

要让此 slider 按照您的描述从左向右滑动，并且不对标记进行任何其他更改，您可以在 style="display: none" 上内联设置 .accordion_box div ，然后在 CSS 中添加 display: inline-block; 到您拥有的 div 选择器。试试这个:

$(".slide-toggle").click(function() {
  $(".accordion_box").animate({
    width: "toggle"
  });
});

#about .about_content .accordion_content {
  font-size: 0;
  min-height: 700px;
  padding-top: 50px;
  text-align: left;
}

#about .about_content .accordion_content .accordion_box,
#about .about_content .accordion_content .accordion_toggle {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
}

#about .about_content .accordion_content .accordion_box {
  background: blue;
  min-height: 200px;
  width: 90%;
  display: inline-block;
}

#about .about_content .accordion_content .accordion_toggle a.slide-toggle {
  display: block;
  width: 50px;
  height: 200px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about">
  <div class="wrapper">
    <div class="about_content">
      <h3>About Us</h3>

      <div class="accordion_content">
        <div class="accordion_box" style="display: none;"></div>
        <div class="accordion_toggle">
          <a href="#about" class="slide-toggle"></a>
        </div>
      </div>
    </div>
  </div>
</div>