1

我已经使用 jQuery 创建了显示隐藏内容脚本，但我不想在切换时滑动内容。目前我的内容从左到右移动是我不想要的。

我的 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');
                }
        });
    });

});

小提琴：样本

有什么想法或建议吗？谢谢。

4

6 回答 6

0

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

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

演示

阅读幻灯片切换（）

于 2013-11-08T04:36:53.467 回答
0

您正在体验切换效果的动画片段。因为您正在为参数提供一个函数，所以它正在为元素设置动画。来自 jQuery 文档 ( 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/

于 2013-11-08T04:42:37.977 回答
0

在您的 javascript 中，只需将 .toggle() 替换为 .slideToggle() 就可以了。

$(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/

于 2013-11-08T04:42:51.493 回答
0

现场演示

$('#menu-item-775 a').click(function() {
    $(this).text( this.textContent=='Show'?'Hide':'Show' );
    $(this.getAttribute('href')).slideToggle();   
});
于 2013-11-08T05:02:52.823 回答
0

请试试这个：

 $('#menu-item-775 a').click(function () {
    if($('#collapse1').is(":visible"))
    {
       $('#collapse1').slideUp("slow");
   }else
   {
        $('#collapse1').slideDown("slow");
   }
});
于 2013-11-08T05:26:13.910 回答
0

试试这个脚本

$('#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>
于 2013-11-08T08:05:56.410 回答