JavaScript-如何更改模式的内容而不关闭它？-堆栈溢出

顺晟科技

2022-10-19 12:24:16

161

我有一个模式，当我单击一个按钮时，它会打开，问题是我有两个按钮，它们打开相同的模式，但内容不同，所以如果我在模式打开时单击相同的按钮，它会关闭。这很好，我想做的，但不能做的，是当我点击没有打开的按钮时，改变模式的内容，而不关闭它。有人能帮我做这个吗？这就是我使用的代码:

HTML:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/all.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>EA - Need for Speed Test Page</title>
</head>

<body>
  <header>

    <nav class="menu-togglers is-visible">
      <ul>
        <li class="dropdown-toggler account" id="account"><i class="far fa-user"></i></li>
        <li class="dropdown-toggler help" id="help"><i class="fas fa-question"></i></li>
        <li><i class="fas fa-gamepad"></i></li>
      </ul>
    </nav>
    <!--menu-togglers-->

    <div class="dropdown-menu is-not-collapsed" id="dropdown-menu">

      <img id="close-dropdown" class="dropdown-toggler" src="assets/x-lg.svg">

      <div class="account-container menu-container opacity-0">
        <div id="account-item" class="menu-content">
          <a href="">
            <img src="assets/connectEA.svg" alt="">
            <p>Sign In</p>
          </a>
        </div>
        <!--account-item-->

        <div id="account-item" class="menu-content">
          <a href="">
            <img src="assets/createAccountEA.svg" alt="">
            <p>Create Account</p>
          </a>
        </div>
        <!--account-item-->
      </div>
      <!--account-container-->

      <div class="help-container menu-container opacity-0">
        <div id="help-item" class="menu-content">
          <a href="">
            <img src="assets/originIcon.svg" alt="">
            <p>Verify my Origin Login</p>
          </a>
        </div>
        <!--help-item-->

        <div id="help-item" class="menu-content">
          <a href="">
            <img src="assets/linkAccount.svg" alt="">
            <p>Link my Origin to my PSN ID</p>
          </a>
        </div>
        <!--help-item-->

        <div id="help-item" class="menu-content">
          <a href="">
            <img src="assets/rescueCode.svg" alt="">
            <p>How do I redeem a Code?</p>
          </a>
        </div>
        <!--help-item-->

        <div id="help-item" class="menu-content">
          <a href="">
            <img src="assets/errorIcon.svg" alt="">
            <p>I can't play online!</p>
          </a>
        </div>
        <!--help-item-->
      </div>
      <!--account-container-->

    </div>
    <!--dropdown-menu-->

  </header>
  <!--header-->

  <div style="height: 2000px;"></div>

  <script src="js/hideHeader.js"></script>
  <script src="js/setMenus.js"></script>
</body>

</html>

顺晟科技：

上一篇：Python-来自json2html 下一篇：HTML样式的内容（正文）元素覆盖页

网站建设

Html

JavaScript-如何更改模式的内容而不关闭它？-堆栈溢出