Question

如果菜单打开，那么单击另一个锚标签怎么隐藏它？这样，一次只打开一个菜单。基本上，当我单击锚点时，它不会隐藏附加到该锚点的上一个菜单，而每个菜单都将在不隐藏上一个菜单的情况下打开并在同一按钮上切换打开菜单。

$(document).ready(function(){

        $('a, .elipsBtn').click(function() {
            $(this).parent().next("ul").toggle();
        });

        $(".lockTxt").click(function () {
            $(this).css("line-height","35px").text(function(i, v){
               return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
            });
            $(".IntOptions").hide();
        });
});

body{padding:60px;}

.IntOptions{
    padding:4px 15px 4px 15px;
    float: left;
    position: absolute;
    font-family:Helvetica, Arial, "sans-serif";
    font-size:15px;
    font-weight:200!important;
    text-decoration:none;
    list-style-type:none;
    display: none;
    margin-top:-30px;
    margin-left:30px;
    box-shadow:0 0 5px  #909090;
    border-radius:3px;
    text-align:center;
    background:#fff;
}
.IntOptions li{padding:8px 0 8px 0}
.IntOptions a:link{color:#282828;text-decoration:none}
.IntOptions a:visited{color:#282828;text-decoration:none}
.IntOptions a:hover{color:#0B7BBE;text-decoration:none}
.elipsBtn{color:#0B7BBE;width:20px;font-size:22px;background-color:#f6f6f6;padding:8px 10px 6px 10px;border-radius:30px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>


    <a href="#"><div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div></a>
        <ul class="IntOptions">
            <a href="#"><li>Link 1</li></a>
            <a href="#"><li>Link 2</li></a>
            <a href="#" class="lockTxt"><li>Link 3</li></a>
        </ul>
    <br>
    <a href="#"><div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div></a>
        <ul class="IntOptions">
            <a href="#"><li>Link 1</li></a>
            <a href="#"><li>Link 2</li></a>
            <a href="#" class="lockTxt"><li>Link 3</li></a>
        </ul>

Answer 1

您需要做的就是代替切换最接近的.IntOptions的显示，隐藏所有的.IntOptions，然后显示最接近的一个。

为此，而不是：

$('a, .elipsBtn').click(function() {
  $(this).parent().next("ul").toggle();
});

您可以使用：

$('.IntOptions a, .elipsBtn').click(function() {
  $(".IntOptions").hide();
  $(this).parent().next("ul").show();
});

这可以在下面看到：

$(document).ready(function() {
  $('.IntOptions a, .elipsBtn').click(function() {
    $(".IntOptions").hide();
    $(this).parent().next("ul").show();
  });
  $(".lockTxt").click(function() {
    $(this).css("line-height", "35px").text(function(i, v) {
      return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
    });
    $(".IntOptions").hide();
  });
});

body {
  padding: 60px;
  background: black; /* Added to show buttons */
}

.IntOptions {
  padding: 4px 15px 4px 15px;
  float: left;
  position: absolute;
  font-family: Helvetica, Arial, "sans-serif";
  font-size: 15px;
  font-weight: 200!important;
  text-decoration: none;
  list-style-type: none;
  display: none;
  margin-top: -30px;
  margin-left: 30px;
  box-shadow: 0 0 5px #909090;
  border-radius: 3px;
  text-align: center;
  background: #fff;
}

.IntOptions li {
  padding: 8px 0 8px 0
}

.IntOptions a:link {
  color: #282828;
  text-decoration: none
}

.IntOptions a:visited {
  color: #282828;
  text-decoration: none
}

.IntOptions a:hover {
  color: #0B7BBE;
  text-decoration: none
}

.elipsBtn {
  color: #0B7BBE;
  width: 20px;
  font-size: 22px;
  background-color: #f6f6f6;
  padding: 8px 10px 6px 10px;
  border-radius: 30px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">
  <div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<ul class="IntOptions">
  <a href="#">
    <li>Link 1</li>
  </a>
  <a href="#">
    <li>Link 2</li>
  </a>
  <a href="#" class="lockTxt">
    <li>Link 3</li>
  </a>
</ul>
<br>
<a href="#">
  <div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<ul class="IntOptions">
  <a href="#">
    <li>Link 1</li>
  </a>
  <a href="#">
    <li>Link 2</li>
  </a>
  <a href="#" class="lockTxt">
    <li>Link 3</li>
  </a>
</ul>

请注意，a选择器的父级是必需的（这意味着您需要.IntOptions a，而不仅仅是a），因为.elipsBtn具有一个a本身就是父级，并且您不希望该点击触发两次。

隐藏一个容器并在单击时显示另一个容器

1 个答案: