Question

通过样式化默认设置，父视图中隐藏了父菜单项。当他们通过鼠标徘徊时，课程＆＃34;显示＆＃34;已添加。

但是，我希望类似的概念适用于平板电脑，它依赖于点击或双击。我想要课程＆＃34; show＆＃34;单击父菜单项时添加，如果再次单击，则返回true并打开链接。

HTML

<div id="nav">
  <li class="wsite-menu-item-wrap"><a href="#">Home</a></li>
  <li class="wsite-menu-item-wrap"><a href="#">About</a></li>
  <li class="wsite-menu-item-wrap"><a href="#">Contact</a></li>
</div>

CSS

.show {
  background:orange;
  color:white;
}

的jQuery

$('#nav .wsite-menu-item-wrap a').on('click', function() {

  if($("#nav .wsite-menu-item-wrap a").hasClass("show")){
    return true;
  }
  else {
    return false;
    $(this).addClass('show');
  }

});

Answer 1

首先请注意，当命中return语句时，逻辑流退出当前函数。因此，您当前的addClass()将无法执行任何操作。

您还需要将show类从父a的兄弟姐妹中的li元素移除到已单击的元素。

从那里你的逻辑使用hasClass()是正确的。试试这个：

$('#nav .wsite-menu-item-wrap a').on('click', function(e) {
  if ($(this).hasClass("show")) {
    console.log('subsequent click');
  } else {
    e.preventDefault();
    $(this).addClass('show').closest('li').siblings().find('a').removeClass('show');
    console.log('first click');
  }
});

.show {
  background: orange;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <li class="wsite-menu-item-wrap"><a href="#">Home</a></li>
  <li class="wsite-menu-item-wrap"><a href="#">About</a></li>
  <li class="wsite-menu-item-wrap"><a href="#">Contact</a></li>
</div>

Answer 2

你有一个toggleClass()函数，如果它不存在则添加一个类，如果它已经存在则删除它

        var scanner = new ZXing.Mobile.MobileBarcodeScanner();
        var option = new ZXing.Mobile.MobileBarcodeScanningOptions { UseCode39ExtendedMode = true, TryHarder = true, PureBarcode = true };
        var result = await scanner.Scan(option);

        if (result != null)
            await Application.Current.MainPage.DisplayAlert("It says..", result.Text, "Cancel");
        await Application.Current.MainPage.Navigation.PopAsync(true);

$('#nav .wsite-menu-item-wrap a').on('click', function() {
   $(this).toggleClass('show');
});

.show {
  background:orange;
  color:white;
}

如果单击一次，如何获得返回false的链接，但如果再次单击则返回true？

2 个答案: