Question

我想淡化切换div container中的所有内容但不切换链接而不是带有类to_top的div。但是使用以下代码div container fardtoggles中的所有内容。哪里我错了？

这是我的代码：

$("#container").not(".to_top", "a").on('tap', function(e) {
    $("#headline").fadeToggle(700);
    $("#headline_tap").fadeToggle();
});

这是我的html：

<head>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="fileadmin/js/menue.js"></script>
  <script src="fileadmin/js/tap.js"></script>
</head>
<body>
 <div id="menue"></div>
 <div id="headline">
   <div id="menueicon"></div>
 </div>
 <div id="headline_tap">
     <div id="menueicon"></div>
 </div>   
 <div id="container">
    <div id="top">
      <div id="topimage"></div>
    </div>   
    <div id="content">
       <p class="bodytext">...Im Falle der Aktivierung der ...</p>
       <p class="bodytext">Die im Rahmen... dem folgenden Link verfügbare
          Browser-Plugin herunterladen und installieren:&nbsp;<a            
            href="http://tools.google.com/dlpage/gaoptout?hl=de" target="_blank">Link</a>.
      </p>
    <a href="impressum/#top" title="Zum Seitenanfang" class="to_top"><img src="/fileadmin/images/mobile/to_top.png"></a>


 <div id="footer"></div>
 </div>
   <div id="footline"></div>  
</body>

谢谢！

Answer 1

你应该这样做：

$('#container :not(".to_top, a")').on('tap', function(e) {  
    $("#headline").fadeToggle(700);
    $("#headline_tap").fadeToggle();
});

Answer 2

应该是：

$("#container :not(.to_top,a)").on('tap', ...);

您只是将.not()应用于#container DIV，而不是其中的元素。

单击链接时，单击事件会冒泡到包含的元素。因此，即使事件未绑定在链接上，它仍然绑定在链接周围的<p>上。为了防止这种情况，您需要在禁用传播的排除元素上添加处理程序：

$("#container .to_top, #container a").on("tap", function(e) {
    e.stopPropagation();
});

您还应该在主处理程序中使用stopPropagation。否则，标题会针对您单击的原始元素切换一次，然后再针对其容器切换，依此类推。

DEMO - 我使用click代替tap，因此可以与普通浏览器一起使用。

Answer 3

现在我找到了它：

$("#container").on("tap", function(e) {
  var target = $(e.target);
  if (!target.is('a')) {
    $("#headline").fadeToggle(700);
    $("#headline_tap").fadeToggle();
  }
});

jquery：fadeToggle所有内容，但不是链接和特殊div

3 个答案: