jQuery 嵌套幻灯片切换(水平和垂直)

Question

1( 如何让.window从.option按钮水平slideToggle？

2(然后如何让所选.slide也动画化为slideToggle，而不仅仅是显示为display:block？

这个想法是让.window从.option按钮内显示，然后在选择radio时让.slide作为普通slideToggle进行动画处理。

$(".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>