jQuery嵌套的slideToggle（水平和垂直）

Question

1）我如何获得.window到slideToggle从水平.option按钮？

2）然后如何获取选定的.slide使其也可以作为slideToggle进行动画处理，而不是仅显示display:block ？

我们的想法是具有.window从内出现.option按钮，然后具有.slide有生作为一个正常slideToggle当radio选择。

 $(".option").on("click", function() { $(".window").slideToggle("fast"); $('.slide').addClass('hide'); }); $(':radio').change(function(event) { var id = $(this).data('id'); $('.' + id).removeClass('hide').siblings().addClass('hide'); }); 

 .hide { display: none; } .window { display: none; } .option { padding: 20px 30px; cursor: pointer; display: inline-block; color: white; border-radius: 4px; font-weight: 700; background: #fc2757; cursor: pointer; } .list { display: flex; list-style: none; border: 3px solid; } .slide { width: 200px; border: 3px solid; } input[type="radio"] { display: none; } input[type="radio"]:checked~label svg { opacity: 1; border: 3px solid; border-radius: 50%; fill: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" id="create" value="create" name="radio" data-id="create"><label class="option" for="create">Create</label></input> <div class="window"> <ul class="list"> <li> <input type="radio" id="deal" value="deal" name="radio" data-id="deal" /><label for="deal"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50"><path d="M21.531 54.713L39.29 72.472l32.583-32.583L54.115 22.13 21.531 54.713zm70.993-24.39l-7.556-7.557a10.088 10.088 0 0 1-4.841 1.231c-5.591 0-10.123-4.532-10.123-10.122 0-1.753.448-3.402 1.232-4.841l-7.557-7.557a5.074 5.074 0 0 0-7.157 0L1.478 56.524a5.075 5.075 0 0 0 0 7.156l7.558 7.557a10.085 10.085 0 0 1 4.841-1.23c5.591 0 10.122 4.53 10.122 10.121 0 1.753-.447 3.402-1.232 4.842l7.557 7.557a5.077 5.077 0 0 0 7.158 0l55.044-55.046a5.077 5.077 0 0 0-.002-7.158zM39.29 80.595L13.41 54.713l40.707-40.705 25.879 25.881L39.29 80.595z" fill="#929daf"/></svg>Deals</label></li> <li> <input type="radio" id="buzz" value="buzz" name="radio" data-id="buzz" /><label for="buzz"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50"><path d="M78.2 48.916a3.647 3.647 0 0 1 0-3.195l3.355-6.866a3.639 3.639 0 0 0-1.565-4.814l-6.75-3.58a3.634 3.634 0 0 1-1.877-2.588l-1.321-7.529a3.637 3.637 0 0 0-4.094-2.973l-7.569 1.07a3.642 3.642 0 0 1-3.038-.986l-5.495-5.313a3.64 3.64 0 0 0-5.061 0l-5.495 5.313a3.634 3.634 0 0 1-3.038.986l-7.569-1.07a3.635 3.635 0 0 0-4.09 2.973l-1.321 7.529a3.644 3.644 0 0 1-1.878 2.587l-6.753 3.58a3.64 3.64 0 0 0-1.561 4.815l3.355 6.866a3.647 3.647 0 0 1 0 3.195l-3.355 6.867a3.639 3.639 0 0 0 1.564 4.814l6.75 3.58a3.644 3.644 0 0 1 1.878 2.588l1.32 7.528a3.637 3.637 0 0 0 4.095 2.973l7.568-1.07a3.642 3.642 0 0 1 3.039.986l5.494 5.313a3.64 3.64 0 0 0 5.062 0l5.495-5.313a3.634 3.634 0 0 1 3.038-.986l7.569 1.07a3.637 3.637 0 0 0 4.093-2.973l1.321-7.528a3.644 3.644 0 0 1 1.878-2.588l6.75-3.58a3.642 3.642 0 0 0 1.565-4.814l-3.36-6.867zM40.04 69.152l8.9-16.965-14.555-7.263 20.214-19.438-8.901 16.95 14.552 7.263-20.21 19.453z" fill="#929daf"/></svg>Buzz</label></li> </ul> </div> <div class="slide deal hide">deals</div> <div class="slide buzz hide">buzz</div> 

Answer 1

为什么不同时向上和向下滑动它们，而不是添加/删除“隐藏”类（使其隐藏/隐藏）呢？

 $(".option").on("click", function() { $(".window").slideToggle("fast"); $('.slide').addClass('hide'); }); $(':radio').change(function(event) { var id = $(this).data('id'); $('.slide').slideUp(500, function(){ $('.' + id).slideDown(500); }); }); 

 .hide { display: none; } .window { display: none; } .option { padding: 20px 30px; cursor: pointer; display: inline-block; color: white; border-radius: 4px; font-weight: 700; background: #fc2757; cursor: pointer; } .list { display: flex; list-style: none; border: 3px solid; } .slide { width: 200px; border: 3px solid; } input[type="radio"] { display: none; } input[type="radio"]:checked~label svg { opacity: 1; border: 3px solid; border-radius: 50%; fill: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" id="create" value="create" name="radio" data-id="create"><label class="option" for="create">Create</label></input> <div class="window"> <ul class="list"> <li> <input type="radio" id="deal" value="deal" name="radio" data-id="deal" /><label for="deal"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50"><path d="M21.531 54.713L39.29 72.472l32.583-32.583L54.115 22.13 21.531 54.713zm70.993-24.39l-7.556-7.557a10.088 10.088 0 0 1-4.841 1.231c-5.591 0-10.123-4.532-10.123-10.122 0-1.753.448-3.402 1.232-4.841l-7.557-7.557a5.074 5.074 0 0 0-7.157 0L1.478 56.524a5.075 5.075 0 0 0 0 7.156l7.558 7.557a10.085 10.085 0 0 1 4.841-1.23c5.591 0 10.122 4.53 10.122 10.121 0 1.753-.447 3.402-1.232 4.842l7.557 7.557a5.077 5.077 0 0 0 7.158 0l55.044-55.046a5.077 5.077 0 0 0-.002-7.158zM39.29 80.595L13.41 54.713l40.707-40.705 25.879 25.881L39.29 80.595z" fill="#929daf"/></svg>Deals</label></li> <li> <input type="radio" id="buzz" value="buzz" name="radio" data-id="buzz" /><label for="buzz"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50"><path d="M78.2 48.916a3.647 3.647 0 0 1 0-3.195l3.355-6.866a3.639 3.639 0 0 0-1.565-4.814l-6.75-3.58a3.634 3.634 0 0 1-1.877-2.588l-1.321-7.529a3.637 3.637 0 0 0-4.094-2.973l-7.569 1.07a3.642 3.642 0 0 1-3.038-.986l-5.495-5.313a3.64 3.64 0 0 0-5.061 0l-5.495 5.313a3.634 3.634 0 0 1-3.038.986l-7.569-1.07a3.635 3.635 0 0 0-4.09 2.973l-1.321 7.529a3.644 3.644 0 0 1-1.878 2.587l-6.753 3.58a3.64 3.64 0 0 0-1.561 4.815l3.355 6.866a3.647 3.647 0 0 1 0 3.195l-3.355 6.867a3.639 3.639 0 0 0 1.564 4.814l6.75 3.58a3.644 3.644 0 0 1 1.878 2.588l1.32 7.528a3.637 3.637 0 0 0 4.095 2.973l7.568-1.07a3.642 3.642 0 0 1 3.039.986l5.494 5.313a3.64 3.64 0 0 0 5.062 0l5.495-5.313a3.634 3.634 0 0 1 3.038-.986l7.569 1.07a3.637 3.637 0 0 0 4.093-2.973l1.321-7.528a3.644 3.644 0 0 1 1.878-2.588l6.75-3.58a3.642 3.642 0 0 0 1.565-4.814l-3.36-6.867zM40.04 69.152l8.9-16.965-14.555-7.263 20.214-19.438-8.901 16.95 14.552 7.263-20.21 19.453z" fill="#929daf"/></svg>Buzz</label></li> </ul> </div> <div class="slide deal hide">deals</div> <div class="slide buzz hide">buzz</div>