首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >切换jQuery隐藏/显示

切换jQuery隐藏/显示
EN

Stack Overflow用户
提问于 2012-10-22 17:33:50
回答 2查看 241关注 0票数 1

我有一个导航,我正在使用jQuery幻灯片来显示导航下的内容。我让div在你点击不同的导航项目时切换,但当我点击相同的导航项目来关闭它时,它只是弹出关闭的选项卡,然后再次打开。我在div里面有一个关闭按钮,可以暂时关闭它。

如何让div在opened>之后关闭?

指向该示例的链接是here

我的jQuery如下:

代码语言:javascript
运行
复制
(function ($) {
    $.fn.showHide = function (options) {

        //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () { 

             $('.toggleDiv').slideUp(options.speed, options.easing);    
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);

我要用以下命令来激发:

代码语言:javascript
运行
复制
$(document).ready(function(){

    $('.show_hide').showHide({           
        speed: 300,  // speed you want the toggle to happen 
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        showText: 'View',// the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open
    }); 

});
EN

回答 2

Stack Overflow用户

发布于 2012-10-22 17:38:49

好吧,你在点击的时候将所有的div都向上滑动,这意味着当前打开的div也会向上滑动。

代码语言:javascript
运行
复制
$('.toggleDiv').slideUp(options.speed, options.easing);

我建议给打开的div一个类似"is_open“的类,当你打开另一个div时删除它。在执行任何其他逻辑之前,您可以在单击时检查类:

代码语言:javascript
运行
复制
if($(this).hasClass('is_open')) return;
票数 0
EN

Stack Overflow用户

发布于 2012-10-22 18:07:01

只需添加一个类即可完成此操作,并避免使用$('.toggleDiv')选择器对所有div进行额外的操作。

最简单的方法是检查toggleDiv是否可见。只需在类中将“display”属性从“无”更改为“块”,将会有所帮助。

使用简单的$(This) div (‘opened_div’);打开.addClass并在以后删除它。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13008517

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档