Question

我用jQuery创建了show hide content脚本，但我不想在切换时滑动内容。目前我的内容从左到右移动，我不想要。

我的HTML：

<div id="menu-item-775">
  <a href="#collapse1">
    Contact
  </a>
</div>
<div id="collapse1" style="display:none">
  <div id="contact_main" style="width:100%; height:300px;">
    <div style="float:left; width:55%; color:#FFF; margin:4% 0 0 5%;">
      <div class="contact">
        <p>
          CONTACT 
        </p>
      </div>
      <div>
        FOR BOOKING & SPECIAL APPEARANCES
      </div>
      <div style="padding:">
        14 Tottenham Court Road
        London
        England
        W1T 1JY
      </div>
      <div>
        Phone: XXX / 555-3333
      </div>
    </div>
    <div style="float:right; width:40%;">
      Right
    </div>
  </div>
</div>

我的JS：

$(document).ready(function() {
    $('#menu-item-775 a').click(function() {
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {
                //change the button label to be 'Show'
                //toggle_switch.html('Show');
                } else {
                //change the button label to be 'Hide'
                //toggle_switch.html('Hide');
                }
        });
    });

});

小提琴：Sample

有任何想法或建议吗？感谢。

Answer 1

只需尝试使用:visible之类的is()，

$(collapse_content_selector).slideToggle(function () {
    $(this).is(':visible')? toggle_switch.text('Hide') : toggle_switch.text('Show');
});

Demo

阅读slideToggle()

Answer 2

您正在体验切换效果的动画片段。因为您要为参数提供函数，所以它会为元素设置动画。来自jQuery Doc（http://api.jquery.com/toggle/）：

当持续时间，普通对象或单个“完整”功能时提供，.toggle（）成为动画方法。 .toggle（）方法动画匹配元素的宽度，高度和不透明度同时。隐藏后这些属性达到0时动画，显示样式属性设置为none以确保元素不再影响页面的布局。

因为它同时为宽度和高度设置动画，所以你会得到一个对角动画外观。对你来说，看起来它正在向右滑动，因为“右”文本浮动到div的右侧。实际上，它在设置宽度的同时动画高度。 “右”文本位于div的右侧，但整个动画中的div宽度不是它的完整大小。如果你放慢速度并添加背景颜色，你会清楚地看到对角线动画。

也许最简单的解决方案之一就是使用fadeToggle方法。

$(collapse_content_selector).fadeToggle(function() {
    if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
            toggle_switch.html('Show');
        } else {
            //change the button label to be 'Hide'
            toggle_switch.html('Hide');
        }
});

小提示显示对角线动画：http://jsfiddle.net/LDVXn/

小提琴解决方案：http://jsfiddle.net/cT4FB/

Answer 3

在你的javascript中，只需用.slideToggle（）替换.toggle（），它应该可以解决问题。

$(collapse_content_selector).slideToggle(function() {
    if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        //toggle_switch.html('Show');
    } else {
        //change the button label to be 'Hide'
        //toggle_switch.html('Hide');
    }
});

这是更新的jsfiddle：http://jsfiddle.net/SjKMX/1/

Answer 4

<强> LIVE DEMO

$('#menu-item-775 a').click(function() {
    $(this).text( this.textContent=='Show'?'Hide':'Show' );
    $(this.getAttribute('href')).slideToggle();   
});

Answer 5

请试试这个：

 $('#menu-item-775 a').click(function () {
    if($('#collapse1').is(":visible"))
    {
       $('#collapse1').slideUp("slow");
   }else
   {
        $('#collapse1').slideDown("slow");
   }
});

Answer 6

试试这个脚本

$('#menu-item-775 a').click(function() {
    if($(this).text( this.textContent=='Show'))
    {
        $(this).text( this.textContent='hide')
    }
    else
    {
        $(this).text( this.textContent='Show')
    }
    $(this.getAttribute('href')).slideToggle();   
});

你的HTML代码

<section class="round-border">
    <h2>jQuery toggle() to hide/show collapse content</h2>
    <div id="menu-item-775"> <a href="#collapse1">Show</a>
    </div>
    <div id="collapse1" style="display:none">
        <div id="contact_main" style="width:100%; height:300px;">
            <div style="float:left; width:55%; color:#FFF; margin:4% 0 0 5%;">
                <div class="contact">
                    <p>CONTACT</p>
                </div>
                <div>FOR BOOKING & SPECIAL APPEARANCES</div>
                <div style="padding:">14 Tottenham Court Road London England W1T 1JY</div>
                <div>Phone: XXX / 555-3333</div>
            </div>
            <div style="float:right; width:40%;">Right</div>
        </div>
    </div>
</section>

jQuery切换显示和隐藏内容

6 个答案: