我想实现当我单击"设计自定义电缆"按钮时的效果。在线订购'，步骤1的手风琴内容将崩溃，步骤2的内容将立即扩展，但是，在应用jQuery之后，STEP2内容不会立即扩展，并且步骤1的内容也不会崩溃，任何人都可以掌握帮我，感谢它！
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left').click(function ()
{
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>
</body>
<foot>
<script src="js.js" ></script>
</foot>
</html>它应该在常规中工作，但是它的父母在带有点击处理程序的父母内部。因此，要避免使用此使用
e.stoppropagation（）防止事件 从冒泡DOM树，防止任何父母处理者 被通知事件。
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left button').click(function (e)
{
e.stopPropagation();
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>