我具有允许您打开和关闭在链接中看到的隐藏下拉菜单的功能,但是如果您再次单击同一图像,我还希望能够关闭已经打开的下拉菜单。

目前,我只能关闭clicked元素外部的内容。

代码的主要片段(连接就绪),完整的工作示例-JsFiddle

function close() {
    $('.slide').removeClass("active");
    $('.slide').css("padding-bottom", 0 + "px");
} 

function open() {
    $(this).addClass("active");
    $(this).css("padding-bottom", height);
} 

$('.slide').on('touchstart click', function() {

    close();

    if ( $(this).hasClass("active") ) {
        close();
    } 

    if ( !$(this).hasClass("active") ) {
        $(this).addClass("active");
        $(this).css("padding-bottom", height);
    }
});  

HTML:

 <div class="slide"> title 
      <div class="js-slide">content of slide  hidden via CSS when 
        "active" class is not present</div>
 </div>

===============>>#1 票数:1 已采纳

对您的代码所做的更改似乎达到了预期的效果:

$('.slide').on('touchstart click', function() {

    if ( $(this).hasClass("active") ) {
        close();
    } else {
        close();
        $(this).addClass("active");
        $(this).css("padding-bottom", height);
    }
});  

因为您的close()函数从元素中删除了active类,所以您需要将其放置在不会干扰您检查active类条件的地方。 将其移动到if块内部是一种容易且快速的更改,可以解决此问题。 在两个块中重复使用close()的方式可能会使某些人感到困扰。 如果您是其中之一,请适当地重构。 只是不要在if / then之外执行似乎显而易见的close()移动,因为那样会使该问题重新出现。

小提琴: https : //jsfiddle.net/960cm7ux/1/

  ask by Max Lynn translate from so

未解决问题?本站智能推荐:

3回复

如果用户单击第二个下拉链接,则关闭下拉菜单

我有一个带有多个下拉菜单的导航栏。 因此,当我单击第一个链接时,它将打开下拉列表,但是当我单击第二个链接时,第一个下拉列表不会关闭。 (因此,如果用户单击第二个链接,我想关闭下拉菜单) // main.js (javascript file) function myFunct
1回复

使用bootstrap-select.js根据第一个下拉菜单更改第二个下拉菜单的选项

我试图根据第一个下拉列表的选择来更改第二个下拉列表的选项。 您可以在这里看到它的代码。 但是,因为自从我使用bootstrap-select.js以来它不起作用。 我之所以添加它,是为了有一个不错的多重效果选择。 显然,原因是因为它不再是JS之后带有<option>的
1回复

如何使用Javascript根据先前的下拉值显示第二个下拉菜单

我正在尝试使用JavaScript根据第一个下拉值获取第二个下拉值。 首先,第二个下拉菜单处于隐藏模式,并通过选择第一个下拉菜单来激活,然后通过仅显示基于第一个下拉选择值的数据来输出第二个值。 部门以deptId作为主键。 Bir将deptId作为外键。 我正在尝
1回复

下拉菜单动态填充第二个下拉菜单

我有一些代码,其中第一个下拉菜单使用PHP和JQuery动态填充第二个下拉菜单。 使用的代码 在此函数中,一个getter.php文件使用第一个选择值从数据库中为第二个菜单加载了数据,如下所示: 这个php页面是json编码的。 在change函数内部,有一个.get()
1回复

根据先前的下拉菜单选择显示第二个下拉菜单

我是html / javascript的新手,并且正在开发并尝试找出如何使用此链接中的代码。 我可以在下面的链接中看到解决方案,但是不确定如何在html页面的上下文中应用: http : //jsfiddle.net/3UWk2/3/ 我已经在HTML页面中复制了HTML和JavaS
2回复

第一个下拉菜单隐藏在第二个下拉单击事件上

我在单个页面中使用2个codrops dropdwon菜单。 当用户单击第二个下拉菜单时,我想关闭第一个下拉菜单。 我在我的项目中使用以下代码。 .aspx页面Java脚本 我想结束Select1对,当用户点击Select2 。 请给我建议。 帮我。 JSF
1回复

第二个下拉菜单不会立即显示

我有两个下拉菜单,根据在第一个下拉菜单中选择的内容,出现第二个下拉菜单。 问题是,在某些浏览器中,如果在第一个下拉菜单中选择了某些内容,那么如果我单击第二个下拉菜单,则不会出现下拉菜单,但是如果我再次在第一个下拉菜单中选择了某些内容,然后单击第二个下拉菜单,则该下拉菜单会显示在第二个下拉菜单中
1回复

如何更改第二个下拉菜单的值

我无法在按下编辑按钮时设置第二个下拉菜单的值。 第一个轻松更改。 但是即使我使用相同的方式来更改第一个下拉列表的值,第二个似乎也没有改变,但是由于某种原因第二个没有改变 HTML: 脚本:
2回复

悬停第二个菜单后,第一个下拉菜单未关闭

在打开menu1下拉菜单时,以及在将鼠标悬停在menu2上以直接打开菜单而不关闭de menu1时,出现了一些问题。 如果我打开menu1并将光标从导航中移出以关闭下拉菜单,然后将鼠标悬停在menu2上,则效果很好。 如果我直接从menu1转到menu2或反之,则menu2下拉菜单会出现在m
2回复

一旦在下拉菜单1中选择了某些内容,则启用第二个下拉菜单

我试图仅在dropdown 1选择某项时才启用第二个dropdown dropdown 1 。 默认情况下,它是禁用的。 这是我正在尝试的小提琴。 请帮忙