Question

我的菜单中有一个投资组合项目，然后在桌面上悬停并点击移动设备时会成为下拉菜单。移动设备的问题在于，第一次点击会显示菜单，这一切都很好，但下次点击不会改变任何内容。

我尝试了.toggle()，.toggleClass()，这两项似乎都不起作用。我目前正在测试if / else语句，如下面的JavaScript所示。 “如果窗口宽度小于940px”......然后“如果当前visibility为hidden，请在点击父级时将其更改为visibility: visible”，反之亦然其他。

修改：

我只在小于940px的浏览器窗口中对此进行测试，以模拟“移动”体验。

编辑＃2：

我出于此问题的目的删除了if window width < 940px，因为这样做可能更容易回复？

$(function() {
  
  if ($('.nav__portfolio ul').css('visibility', 'hidden') == true) {
    $('.nav__portfolio').on('click', function() {
      $('.nav__portfolio ul').css('visibility', 'visible');
    });

  } else {
    $('.nav__portfolio').on('click', function() {
      $('.nav__portfolio ul').css('visibility', 'hidden');
    });
  }
  
};

.nav__portfolio ul {
  visibility: hidden;

<li class="nav__portfolio"><p>PORTFOLIO</p>
  <ul>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
  </ul>
</li>

Answer 1

我猜你的主要问题是传递给if语句的条件：

$('.nav__portfolio ul').css('visibility', 'hidden')不是布尔值，因此不会返回true或false

您可以做的是比较该css属性的实际值，如下所示：

$('button').on('click', function() {
  if ($('div').css('visibility') !== 'hidden') {
    $('div').css('visibility', 'hidden');
  } else {
    $('div').css('visibility', 'visible');
  }
})

div {
  height: 200px;
  margin: 20px 0;
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toggle the div</button>
<div></div>

您实际代码的逻辑如下：

$('.nav__portfolio').on('click', function() {
  if ($('.nav__portfolio ul').css('visibility') == 'hidden') {
    $('.nav__portfolio ul').css('visibility', 'visible');
  } else {
    $('.nav__portfolio ul').css('visibility', 'hidden');
  }
})

Answer 2

使用$('.nav__portfolio').on('click', function() { $('.nav__portfolio ul').toggle(); })方法：

＆＃13;

.nav__portfolio ul {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="nav__portfolio"><p>PORTFOLIO</p>
  <ul>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
  </ul>
</li>

＆＃13;

 Private Function CreateShortCut(ByVal TargetName As String, ByVal ShortCutPath As String, ByVal ShortCutName As String) As Boolean
    Dim oShell As Object
    Dim oLink As Object
    'you don’t need to import anything in the project reference to create the Shell Object

    Try

        oShell = CreateObject("WScript.Shell")
        oLink = oShell.CreateShortcut(ShortCutPath & "\" & ShortCutName & ".lnk")

        oLink.TargetPath = TargetName
        oLink.WindowStyle = 1
        oLink.Save()
    Catch ex As Exception

    End Try

End Function

＆＃13;

Answer 3

您是否尝试过hasClass / addClass / removeClass？

可能只需要一个点击监听器

if ($(window).width() <= 940) {

    $('.nav__portfolio').on('click', function() {
        if ($('.nav__portfolio ul').hasClass('visibleClass') {
            $('.nav__portfolio ul').removeClass('visibleClass');
        } else {
            $('.nav__portfolio ul').addClass('visibleClass');
        }
    });
}

.nav__portfolio ul {
    visibility: hidden;
}

.nav__portfolio ul.visibleClass {
    visibility: visible;
}

点击，菜单上的菜单消失。 “节目”有效，但“隐藏”却没有

3 个答案: