Question

我有一个带有一些项目的移动菜单。每个项目都是一个链接。第一项是徽标，其他项是基于文本的链接。

基于文本的链接与它的文本一样大。因此，如果我单击div容器，则链接不会触发。

我为我的问题提供了完整的例子

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}

.link {
  text-decoration: none;
}

body {
  margin: 0;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  display: flex;
  align-items: center;
}

#navbarItems .navbarItemContainer:not(:first-child) {
  margin-left: 30px;
}

.navbarItemContainer {
  background: #1e222a;
}

.navbarLink {
  font-weight: bold;
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #navbarItems .navbarItemContainer:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItemContainer:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #logoLink {
    display: block;
  }
  .navbarItem {
    width: 100%;
    text-align: center;
    padding: 30px 0;
  }
  #navbarItems.activeNavbar {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a id="logoLink" class="link navbarLink" href="#">
          <img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png">
        </a>
      </div>
    </div>

    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a class="link navbarLink" href="#sectionTwo">
                    Link 2
                </a>
      </div>
    </div>

    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a class="link navbarLink" href="#sectionThree">
                    Link 3
                </a>
      </div>
    </div>
  </div>
</div>

如果您检查徽标容器，则会看到该链接将在div容器的整个宽度上触发。通常，我只希望在img单击时触发链接。我该如何解决此问题？

Answer 1

您的ID为#logolink的锚具有display: block（或display: flex，具体取决于视口的大小），因此它会扩展以填充其容器。我删除了这些样式，并且看起来像您想要的那样，只在实际图像上方注册了一个悬停。

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}

.link {
  text-decoration: none;
}

body {
  margin: 0;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  
}

#navbarItems .navbarItemContainer:not(:first-child) {
  margin-left: 30px;
}

.navbarItemContainer {
  background: #1e222a;
}

.navbarLink {
  font-weight: bold;
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #navbarItems .navbarItemContainer:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItemContainer:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #logoLink {
    
  }
  .navbarItem {
    width: 100%;
    text-align: center;
    padding: 30px 0;
  }
  #navbarItems.activeNavbar {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a id="logoLink" class="link navbarLink" href="#">
          <img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png">
        </a>
      </div>
    </div>

    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a class="link navbarLink" href="#sectionTwo">
                    Link 2
                </a>
      </div>
    </div>

    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a class="link navbarLink" href="#sectionThree">
                    Link 3
                </a>
      </div>
    </div>
  </div>
</div>

Answer 2

您会看到这种现象，因为display: block的CSS设置为#logoLink

#logoLink {
  display: block;
}

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}

.link {
  text-decoration: none;
}

body {
  margin: 0;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  display: inline-block;
  align-items: center;
}

#navbarItems .navbarItemContainer:not(:first-child) {
  margin-left: 30px;
}

.navbarItemContainer {
  background: #1e222a;
}

.navbarLink {
  font-weight: bold;
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #navbarItems .navbarItemContainer:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItemContainer:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #logoLink {
    display: inline-block;
  }
  .navbarItem {
    width: 100%;
    text-align: center;
    padding: 30px 0;
  }
  #navbarItems.activeNavbar {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a id="logoLink" class="link navbarLink" href="#">
          <img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png">
        </a>
      </div>
    </div>

    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a class="link navbarLink" href="#sectionTwo">
                    Link 2
                </a>
      </div>
    </div>

    <div class="navbarItemContainer">
      <div class="navbarItem">
        <a class="link navbarLink" href="#sectionThree">
                    Link 3
                </a>
      </div>
    </div>
  </div>
</div>

将其更改为display: inline-block，您将看到更改，即仅可点击图像。 Here's是阅读display属性的良好参考。

图片会在全宽度上扩展链接触发范围

2 个答案: