Question

我有什么：

HTML

<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>

<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>

的js

    $(document).ready(function() {
      $('#content1').click(function() {
        $(' .content2, .content3 ').slideUp({
          style: "height",
          speed: "slow",
          complete: function() {
            $(' .content1').slideToggle("slow")
          }
        });
      });
      $('#content2').click(function() {
        $(' .content1, .content3 ').slideUp({
          style: "height",
          speed: "slow",
          complete: function() {
            $(' .content2').slideToggle("slow")
          }
        });
      });
                $('#content3').click(function() {
        $(' .content1, .content2 ').slideUp({
          style: "height",
          speed: "slow",
          complete: function() {
            $(' .content3').slideToggle("slow")
          }
        });
      });
    });

我想要什么

点击div时，显示其隐藏的div（内容） slideToggle
如果已打开另一个div的隐藏内容，则使用slideUp关闭它并打开您单击的内容（仅在完成slideUp动画后打开）

我设法通过两个隐藏的div Sample 1来获得所需的效果，但有三个我有Sample 2自动切换问题

救命！如果有更好和更简单的替代方案来获得这种效果，请建议。左见。抱歉我的英语不好。

Answer 1

您的代码可以使用公共类重构，然后使用跟随@RequestMapping(value = "/assignedParticularTable.html", method = RequestMethod.POST) public @ResponseBody String assignedParticularTable(@RequestParam HashMap<String, String> map, HttpSession session) { System.out.println("operation: " + map.get("operation")); return ""; }回调的逻辑，对于所有集合只会调用一次：

＆＃13;

promise().done()

＆＃13;

$(document).ready(function() {
  $('.for_content').click(function() {
    var i = $(this).index('.for_content');
    $('.content:not(:eq(' + i + '))').slideUp({
      style: "height",
      speed: "slow"
    }).promise().done(function() {
      $('.content').eq(i).slideToggle("slow")
    });
  });
});

＆＃13;

* {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #222;
}
li {
  float: left;
}
.link {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  text-decoration: none;
  cursor: pointer;
}
.link:hover {
  text-shadow: 0px 1px 10px #fff;
}
.content1 {
  height: 400px;
  width: 100%;
  top: 0;
  background-color: #333;
}
.content2 {
  height: 400px;
  width: 100%;
  top: 0;
  background-color: #444;
}
.content3 {
  height: 400px;
  width: 100%;
  top: 0;
  background-color: #555;
}

＆＃13;

Answer 2

您可以使用以下内容：

 $('div[id^=content]').click(function () {
      var name = $(this).attr('id');
      $('div[class^=content]:visible').slideUp('slow', function() {
           $('.' + name).slideDown('slow');
      });  
 });

我希望它有所帮助。： - 。）

点击slideToggle多个隐藏的div

2 个答案: