Question

我正在使用JQuery进行隐藏/显示li。我的要求是，当我单击任何li时，它应该显示但隐藏所有其他li项。当我将鼠标悬停在文本'显示所有列表项但不隐藏单击的项目<时， / strong>”，则其余列表项应使用jquery在该li的下方。我是JQuery的新手，所以没有太多的想法，下一步要做什么？

<!DOCTYPE html> <html> <style> .list_style{ list-style-type:none; } </style> <body> <h4>An Unordered List:</h4> <ul class="list_style"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> </ul> <span class="show_all_except_clicked"></span> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script> $(".list_style li").on('click',function(){ $('li', $(this).closest('ul')).not(this).hide(); $(".show_all_except_clicked").html("<a href='#' class='show_remaining'>show all list item but don't hide clicked item </a>"); }); </script> </body> </html>

Answer 1

这可以通过添加一些带有简单jquery代码的CSS来完成。

请参阅下面的示例

class UserFinder(databaseConnection: databaseConnection) {
}

@Module
class DatabaseConnectionModule {
   lazy val databaseConnection: DatabaseConnection = ...
}

@Module
class UserModule(databaseConnectionModule: DatabaseConnectionModule) {
    lazy val userFinder:UserFinder = wire[UserFinder]
}
class UserFinderSpec extends FlatSpec {
    //How to access UserFinder here?
    //val wired = wiredInModule(new UserModule(new DatabaseConnectionModule))
    //val userFinder = wired.lookup(classOf[UserFinder]
    //Above way to access the instances seems complicated 
    //as I need to instantiate the modules with it's dependency chain which can be very long in my use-case.
}

/*I have added 2 selectors*/
$(".show-hide, .menu").hover(function() {
  $('.menu').toggleClass('active');
});
$(".menu li").on('click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

.menu {
  position: relative;
  list-style-type: none;
  padding-top: 30px;
  padding-left: 0;
  height: 0;
  overflow: hidden;
}

.menu.active {
  height: auto;
}

.menu li {
  height: 30px;
  width: 100%;
}

.menu li.active {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

希望此帮助。将mouseover函数添加到脚本的li中：

$(".list_style li").on('click',function(){
$('li', $(this).closest('ul')).not(this).hide();
$(".show_all_except_clicked").html("<a href='#' class='show_remaining'>show all list item but don't hide clicked item </a>");
});

$(".list_style li").mouseover(function(){
  $('li', $(this).closest('ul')).not(this).show();
});

您可以在codepen中检查结果：https://codepen.io/anon/pen/qMJLye

Answer 3

根据您提出的问题，您只希望在鼠标悬停（悬停）所单击的li项后，在隐藏的li项后显示项。
在这种情况下：

<!DOCTYPE html> <html> <style> .list_style{ list-style-type:none; } </style> <body> <span class="show_all_except_clicked"></span> <h4>An Unordered List:</h4> <ul class="list_style"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script> $(".list_style li").on('click',function(){ if($(this).hasClass("hide")){ $(this).removeClass("hide"); $('li').show(); $(".show_all_except_clicked").html(""); }else{ $(this).addClass("hide"); $('li').not(this).hide(); $(".show_all_except_clicked").html("<a href='#' class='show_remaining'>show all list item but don't hide clicked item </a>"); } }); $(".show_all_except_clicked").hover(function(){ $("li").not(".hide").show(); },function(){ $("li").not(".hide").hide(); }) </script> </body> </html>

我的想法是为隐藏的li项目添加一个 hide 的类（假设没有其他类），并显示所有 next

如何在单击圆角li时隐藏所有li项，并使用jquery在鼠标悬停时再次在该项下方显示剩余的li项

3 个答案: