Question

在下面的代码中，我尝试创建一个动态菜单（这里写为静态）。当您单击菜单上的任何位置时，它将发出警报。

document.getElementById("rightMenu").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

ul,li{
  list-style:none;
  }
#prof-name {
    margin-top: 10%;
    padding-right: 0 ! important;
}

<ul id="rightMenu" class="user-profile">
   <li class="topmenu rtopmenu-display-event" id="prof-name">
       <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
       <ul class="profile-menu" id="profile-menu">
    <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
     <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
                <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
              </ul>
            </li>
                      </ul>

但我遇到的问题是如果你点击菜单右侧就会发出警报事件。

我尝试了padding-right: 0 ! important;，但是没有用，不可能将特定宽度设置为菜单，因为它是动态生成的。

如何解决此问题？

Answer 1

您的UL元素是块级元素，因此如果您检查它，您可以看到它是100％宽。

将其设置为显示：inline-block;或给它一些特定的宽度。

#rightMenu { display: inline-block }

fiddle

Answer 2

是的，因为你已经在整个$this->permission_controller->permission();元素（菜单的容器）上应用了click事件而不仅仅是菜单 - 只需定位{{1 }}

将您的javascript代码更改为

<ul>

<a>

document.querySelector("#rightMenu a").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

document.querySelector("#rightMenu a").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

Answer 3

使用此代码或仅在padding-left:0px

中提供ul

.user-profile
{
padding-left:0px;
}

Answer 4

＆＃13;

document.getElementById("rightMenu").addEventListener("click",function(){
            alert("oh you clicked on right Menu");
        });

＆＃13;

  html,body{
        padding:0;
        margin:0;
    }
    ul,li{
        list-style:none;
        padding:0;
        display:inline-block;
  
    }
    #prof-name {
        margin-top: 10%;
    }

＆＃13;

<ul id="rightMenu" class="user-profile">
    <li class="topmenu rtopmenu-display-event" id="prof-name">
        <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
        <ul class="profile-menu" id="profile-menu">
            <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
            <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
            <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
        </ul>
    </li>
</ul>

＆＃13;

如何删除默认填充？

4 个答案: