Question

我遇到了jquery touch事件的问题。当我使用我的iphone并点击Menu1时，它会显示我的网页＆＃34; link1＆＃34;。

但我想要这个，当我点击（触摸）Menu1时，它会显示link1和link2。然后我可以在link1或link2之间进行选择。

默认情况下，链接1和2隐藏在我的CSS中。

＆＃13;

$('body').on('touchstart', '#b', function() {
  $('#b').hide();
  $('#c').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="a">
  <li id="b">
    <a> <strong>Menu 1 </strong> </a>
  </li>
  <li id="c">
    <a href="vv.com"> <strong> Link 1 </strong> </a>
  </li>
  <li id="c">
    <a href="vv.com"> <strong> Link 2 </strong> </a>
  </li>
</ul>

＆＃13;

Answer 1

定位:first LI，而不是使用jQuery＆＃39; s .nextAll()

_{（我为了简单起见删除了ID）}

＆＃13;

$('body').on('touchstart', 'li:first', function(){
 $(this).nextAll().stop().slideToggle();
});

＆＃13;

ul li + li{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a><b>Menu 1</b></a>
  </li>
  <li>
    <a href="vv.com"><b>Link 1</b></a>
  </li>
  <li>
    <a href="vv.com"><b>Link 2</b></a>
  </li>
</ul>

＆＃13;

但是你可以看到效果太可怕了 - 每个LI都有自己的动画，因此，通常，我们如何处理这个任务就是使用嵌套列表：

＆＃13;

$(document).on('touchstart', 'li', function(e) {
  e.stopPropagation(); // If you need more nested lists don't propagate the click
  $(this).find("> ul").stop().slideToggle();
});

＆＃13;

li > ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <b>Menu 1</b> <!-- Why use <a> if it's not an anchor... -->
    <ul>          <!-- Nested list! Yey -->
      <li>
        <a href="http://vv.com"><b>Link 1</b></a>
      </li>
      <li>
        <a href="http://vv.com"><b>Link 2</b></a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Jquery事件触摸传播父对子（链接）

1 个答案: