改变打开和关闭导航菜单的方向

Question

我有一个表格。 在此表单中，当屏幕处于移动大小时，它必须使用导航菜单来显示表单的详细信息。

我的网站是多语言的。 当语言是en时，它必须是ltr并从left页面打开导航；当语言是fa时，它必须是rtl从right打开导航。

我编写了该代码，但我不知道如何更改导航的开放方向。 我把我的代码放在这里请帮助解决这个问题。

演示

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

点击打开

 <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>
  </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代码：

    function openNav(){
   document.getElementById("activity-info").style.width = "80%";
}

Answer 1

您可以通过在 animation 开始之前更改 div 的初始 position 来做到这一点。

function openNav(){
   document.getElementById("activity-info").style.width = "80%";
   if(language === 'fa') { // Assumed variable name language
      document.getElementById("activity-info").style.right = 0;
      document.getElementById("activity-info").style.left = 'auto';
   } else {
      document.getElementById("activity-info").style.left = 0;
  }
}

Answer 2

要使其从右侧打开，您所要做的就是删除left属性并添加与 css 中.activity-info中left属性相同值的right属性，因此要从左侧打开它，请使用以下命令：

  .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-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0; // here is the trick
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

那么不一遍又一遍地重复代码的解决方案是什么？ 非常简单，您将拥有 1 个 class （主类）和 2 个其他类（根据语言从右侧或左侧打开）

所以这里是主要的 class：

  .activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

左 class：

  .activity-info-left {
    left: 0;
  }

右 class：

  .activity-info-right {
    right: 0;
  }

在 html 中：

<div id="activity-info" class="activity-info activity-info-right">

您已根据语言将适当的 class 添加到 div 中。 在这里您可以找到如何将 class 添加到元素。