Question

我在尝试切换多个项目时遇到了一些麻烦。

以下是我想要实现的目标摘要：

有5个div（让我们称之为 trigger-div）还有另外5个与每个对应的div trigger-div（让我们称之为内容DIV）
当我点击一个trigger-div1时，它就是弹出相应的content-div1 与.animate（）
当我点击另一个trigger-div2时，打开的content-div1将关闭使用.animate（）切换宽度和完成关闭后，相应的content-div2将打开与.animate（）。
与其他trigger-div相同。例如，当我单击trigger-div3时，content-div2将关闭，而content-div3将在之后打开。

这是我到目前为止的代码

<script>
$(document).ready(function() {
var div_id;
var tile_object;
var ele_about = 0;
var ele_career = 0;
var ele_restaurant = 0;
var ele_contact = 0;
var ele_blog = 0;

var toggle_check = function (tile_object, div_id) {
 if (ele_about == 1){
 animate_close("ele_about", tile_object, div_id, "#tile-blog"); 
 } 
 else if (ele_career==1){
 animate_close("ele_career", tile_object, div_id, "#tile-career-content");
 }
 else if (ele_restaurant==1){
 animate_close("ele_restaurant", tile_object, div_id, "#tile-restaurant-content");
 }
 else if (ele_contact==1){
 animate_close("ele_contact", tile_object, div_id, "#tile-contact-content");
 } 
 else if (ele_blog==1){
 animate_close("ele_blog", tile_object, div_id, "#tile-blog");
 } 
 else { 
 animate_open(tile_object, div_id); 

 }
}

var animate_close = function (tile_close, tile_open, div_id, div_close){
 $(div_close).animate({
 width: "toggle",
 }, 600, "linear", function (){ animate_open(tile_object, div_id); }
 ); 

 tile_close = 0;
}

var animate_open = function (tile_object, div_id) {
 $(div_id).animate({
 width: "toggle",
 }, 600);

 tile_object = 1;
 alert(ele_about)
}

$("#tile-about").click( function (){
 toggle_check(ele_about, "#tile-blog"); 
});

$("#tile-career").click( function (){
 toggle_check("ele_career", "#tile-career-content");
});

$("#tile-restaurant").click( function (){
 toggle_check("ele_restaurant", "#tile-restaurant-content");
});
}); </script>

这是HTML

<a id="trigger-about" href="#"><div id="tile-about" class="tile-about-inactive"></div></a>
<div id="tile-career" class="tile-career-inactive"></div>
<div id="tile-restaurant" class="tile-restaurant-inactive"></div><div id="tile-contact" class="tile-contact-inactive"></div>

<div id="tile-blog" class="div-hide">
blog content
</div>

<div id="tile-about-content" class="div-hide">
career content
</div>

<div id="tile-career-content" class="div-hide">
career content
</div>

<div id="tile-restaurant-content" class="div-hide">
restaurant content
</div>

<div id="tile-contact-content" class="div-hide">
contact content
</div>

“div-hide”类只是一个“display：none”css来隐藏最初的内容而“tile-active”是我的悬停效果，这很好。

运行此之后，由于某种原因，“ele_”变量不会转换为“toggle_check（）”和“animate_open（）”函数。我注意到了这一点，因为警报（ele_about）一直返回0值。

请帮忙！我很难过:(

3 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

答案 2 :(得分：0)

Answer 1

您需要做的是将所有触发器div与一个类组合在一起，并且所有内容div与另一个类组合，但也为它们提供所有ID。存储应作为其相应触发器div的数据属性打开的div的id，然后当单击任何触发器div时，您可以简单地执行此操作：

$(".trigger-divs").click(function() {
var contentDiv = $("div#"+$(this).attr('data'));
$(".content-divs :visible").hide();//hide visible content div;
contentDiv.slideDown();//fadeIn, animate({width: '600px'}) whatever you want
})

注意：我使用attr来访问数据，a因为它是硬编码的，而b是因为jQuery 1.4和1.6的封装使用$ .data方法存储的数据不同。

Answer 2

这不太有用，因为我需要.content-divs在关闭时动画而不是隐藏它。

我也在jQuery论坛上发布了这个，并得到了这个：

$('div.trigger-div').click(function() { // Click on trigger
            var id = '#' + this.id + '-content'; // Find matching content div
            var openContent = function() {
                  $(id).animate({width: 'toggle'}, 600);
            };
            var current = $('div.content-div:visible'); // Find any open content
            if (current.length > 0) {
                  current.animate({width: 'toggle'}, 600, 'linear', function(){ openContent(); }); // Close it then open new one
            }
            else {
                  openContent(); // Open new one
            }
      });

虽然这很有效，但仍然存在一个问题，即一旦打开它就无法关闭任何div。

意思是，如果我点击“tile-about”div，则会打开“tile-about-content”。当我再次点击“tile-about”时，“tile-about-content”关闭并重新打开。我需要它才能关闭。

有没有办法获取内容的ID名称并尝试将其与this.id匹配？

Answer 3

我在jQuery论坛的帮助下解决了这个问题。

这是解决方案 https://forum.jquery.com/topic/having-some-trouble-with-animate#14737000002530879

感谢您的帮助！

在.animate（）遇到一些麻烦

3 个答案: