JQUERY

Question

我正在设计一个网页，我的想法是在顶部有3个按钮，如果其中一个点击，则在按钮下方显示一个下拉菜单。我遇到的问题是，如果没有如何告诉jquery以及显示的菜单，这是关闭的，我按下了打开，如果我按下已经deslegado的相同，这是关闭的。

我尝试但不起作用

$("#btn2").click(function (e) {
    if( $('.desplegable').css('display') == 'block' ) {
        $('.desplegable').slideUp(1000);    
    }

    $('#desplegable_right').slideToggle(1000);
});

我留下链接：http://jsfiddle.net/Bu5eX/

我已经查看了Stackoverflow上的其他问题，但我误解/能够理解任何示例。非常感谢你

Answer 1

试试这个：

$("#btn1").click(function (e) {
    $('.desplegable').hide();
    $('#desplegable_left').slideToggle(1000);
});
$("#btn2").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_center').slideToggle(1000);
});
$("#btn3").click(function (e) {
     $('.desplegable').hide();
    $('#desplegable_right').slideToggle(1000);
});

Demo Here

Answer 2

您可以稍微简化选择器：

// use one function for all buttons....
$('.button').click(function(e) {
    // i is current index of the clicked button, and curr
    // the current element.
    var i = $(this).index('.button'),
        curr = $('.desplegable').eq(i);
    // hide all elements (except the current element)
    $('.desplegable').not(curr).hide();
    // slide down the current one (this has only effect in case
    // the current one is invisible. Or in case you want to open
    // close the active one on click use slideToggle instead of slideDown
    curr.slideDown(1000);   
});

更新了fiddle is here。

Answer 3

DEMO http://jsfiddle.net/Bu5eX/9/

向您的按钮添加目标，这个小脚本将为您的按钮执行所有操作。

*它也会关闭打开的菜单。

JQUERY

$('.button').click(function(){      
    var getID = $(this).attr('target');

    if($('#'+getID).css('display') != 'block'){
        $('.desplegable').hide();
        $('#'+$(this).attr('target')).slideDown(500);
    }
    else       
        $('.desplegable').slideUp(500);
});

Answer 4

您可以使用相同的选择器。当用户单击按钮时，您需要捕获该按钮的索引。然后添加所有div''desplegable'类'将'删除'或像这样的somehing。然后从具有相同索引按钮的div中删除此类（将删除）。然后你知道该怎么做：）

Answer 5

切换打开/关闭子面板

我将从以下 HTML ：

开始

<div class="button-wrap">
    <div id='btn1' class='button'>button1</div>
    <div id='btn2' class='button'>button2</div>
    <div id='btn3' class='button'>button3</div>
</div>
<div id='desplegable_left' class='desplegable btn1'>Left</div>
<div id='desplegable_center' class='desplegable btn2'>Center</div>
<div id='desplegable_right' class='desplegable btn3'>Right</div>

您希望将每个.button元素与相应的.desplegable元素相关联，其中一种方法是将每个id的{{1}}值指定为一个类命名为相应的.button元素。

对于 jQuery ，请使用以下命令：

.desplegable

点击$(".button").click(function (e) { var theID = $(this).attr("id"); var theDisplay = $('.desplegable.' + theID).css("display"); if (theDisplay == 'none') { $('.desplegable').hide(); $('.desplegable.' + theID).slideToggle(1000); } else { $('.desplegable.' + theID).slideToggle(1000); } });后，获取.button属性的值。

然后，您可以使用组合的CSS选择器（例如id）选择相应的目标元素，并检查CSS .desplegable.btn1属性值以查看它是“none”还是“block”，分别对应隐藏或显示。

如果目标元素被隐藏（display），则隐藏所有目标元素并打开感兴趣的元素。

否则，只需切换或隐藏当前的那个。

我不确定你是否真的希望目标元素出现在按钮的右侧，然后在按钮行下方向下移动。

您可以通过将display: none添加到父级来修复此问题，其中包含按钮如 CSS ：

中所示

overflow: auto

小提琴演示位于：http://jsfiddle.net/audetwebdesign/4FWMe/

jquery css显示菜单（打开时关闭其他菜单）

5 个答案:

JQUERY

切换打开/关闭子面板