Question

主要思想是在点击时显示元素，并在任何鼠标点击事件中隐藏它我有以下HTML代码：

<ul>
  <li>
    <span class="name">Author 1</span>
    <span class="affiliation">Institution 1</span> 
  </li>
<li>
    <span class="name">Author 2</span>
    <span class="affiliation">Institution 2</span> 
  </li>
</ul>

我真正想要的是在点击span.name后显示下一个span.affiliation。在每次其他点击（在任何html元素上）上隐藏它，但如果用户点击其他span.name - 另外显示下一个span.affiliation。我已经尝试了几种变体而没有成功。

我已经尝试过的javascript示例：

  $('span.affiliation').hide();
  $('span.name').click(function() { 
  var clicks = $(this).data('clicks'); 
  var target = $(this).next('span.affiliation'); 
  if (clicks) { 
    target.hide(); 
  } else { 
    $('span.affiliation').not(target).hide(); 
    var pos = $(this).position(); 
    var width = $(this).outerWidth(); 
    $(this).next(target).css({ 
      position: "absolute", 
      top: pos.top + 30 + "px", 
      left: pos.left + (-5) + "px" 
    }).delay(80).show('slow'); 
  } 
  $(this).data("clicks", !clicks); 
});

Answer 1

这是你的意思吗？

{
  "/sock/*": {
    "target": "http://localhost:3000/socket.io/",
    "ws": true,
    "logLevel": "debug"
  }
}

jQuery(function($){
  var $affiliations = $('.affiliation');
  
  $(document.body).on('click', function(e){
    var $clickedElement = $(e.target);
    
    if ($clickedElement.is('.name')) {
      $affiliations.not($clickedElement.next('.affiliation')).hide();
      $clickedElement.next('.affiliation').toggle();
    } else {
      $affiliations.hide();
    }
  });
});

.affiliation { display: none; }

body {
  min-width: 100vw;
  min-height: 100vh;
  background-color: #DDD;
}

复杂的隐藏和显示与jquery

1 个答案: