Question

我创建了导航Demo，我想设置一个黑色背景，宽度必须为100%，并且当单击背景时，导航必须关闭。

此导航的重要事项是内容必须为80％，但背景必须为100％。

 <div id="activity-info" class="activity-info">
<div class="activity-container">
  <div class="activity-header">
    <span id="closeActivityInfo" (click)="closeActivityInfo()">
      <mat-icon>clear</mat-icon>
    </span>
    <div class="activity-info-title">
      <span>
        {{ "GENERAL.ACTIVITY_INFO" | translate }}
      </span>
    </div>
  </div>
  <div class="activity-content">
    <div>
      <div class="item">
        <div class="item-label">{{ "GENERAL.CREATOR" | translate }} :</div>
        <div class="item-value">
          <pfa-user-field
            [displayName]="oldEditModel.creator"
            [row]="false"
          ></pfa-user-field>
        </div>
      </div>
    </div>
  </div>
</div>

css代码：

   #showInfos {
    display: block;
    width: 100% !important;
    margin-bottom: 7px !important;
  }
  #closeActivityInfo {
    display: block;
  }
  .activity-info-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  .activity-container {
    width: 100%;
  }
  .edit-form {
    width: 100%;
  }
  .form-content {
    height: 100%;
  }
  .showInfos {
    width: 60px;
    height: 40px;
    background-color: #e52727;
    color: white;
    position: absolute;
    right: 40px;
    bottom: 20px;
  }
}

js代码：

Answer 1

首先，我已经编辑了您的代码以进行更合理的分类，然后重新排列了所有代码。我在注释行中提到了我的更改。如果我对您的理解正确，那么您想做这些事情。

CSS：

.activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black; /* Add black background */
    overflow-x: hidden;
    transition: 0.5s;
    margin-top: 29px;  /* padding to margin,  calc button height */
  }

  .activity-container { 
    width: 80%;  /* 100% to 80% */
    height: 100%; /* add 100%*/
    background-color: red; /*background color red added*/
  } 

  .activity-info.showNavbar { // if this class is in the activity-info, it specifies the changes that will happen.
    width: 100%;
  }

JavaScript：

  const navbarButton = document.getElementById("showInfos");
  const activityInfo = document.querySelector(".activity-info")

  navbarButton.addEventListener("click", e => { 
     activityInfo.classList.toggle("showNavbar")
  })

  activityInfo.addEventListener("click", e => {
     if (e.target.classList.contains("activity-info")) {
            activityInfo.classList.remove("showNavbar")
     }
  })

Answer 2

如果我理解正确，则应更新函数openNav（），以在打开时将背景宽度设置为100％，并在CSS中将内容宽度设置为80％。如果要通过单击背景关闭导航，则必须将onclick事件移动到该包装器（根据我现在看到的内容，您将该功能应用于具有mat-icon clear的span）并编写了一个函数closeActivityInfo（）与openNav（）类似。

因此，HTML：

<button mat-raised-button onclick="openNav()" id="showInfos" color="primary">
   Click for Open
</button>

<div id="activity-info" class="activity-info" onclick="closeActivityInfo()">
<div class="activity-container">
  <div class="activity-header">
    <span id="closeActivityInfo">
      <mat-icon>clear</mat-icon>
    </span>
    ...

CSS（仅发布更新的部分）：

.activity-container {
   width: 80%;
   background: red;
}

js：

function openNav(){
   document.getElementById("activity-info").style.width = "100%";
   document.getElementById("activity-info").style.left = 0;
   document.getElementById("activity-info").style.right = 'auto';
}
function closeActivityInfo() {
   document.getElementById("activity-info").style.width = "0";
}

设置导航菜单的背景，当单击背景时，必须关闭导航

2 个答案: