在不使用任何CSS并具有完全相同的（视觉）结果的情况下，我可以在单击按钮时显示UL吗？

发布于 2025-02-03 04:03:10 字数 4216 浏览 3 评论 0原文

在我的Web应用程序的响应CSS中，我只在单击“连接钱包”按钮时尝试显示“移动标头”中的UL标签。

我希望它在单击其他任何内容时立即显示并隐藏。可以在不使用任何JS或JQuery的情况下实现这一目标吗？

这是我的代码：

@media screen and (min-width: 501px) and (max-width: 1024px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
    overflow: hidden;
  }
  .mobile-container {
    /* border: dotted 1px yellow; */
    display: grid;
    height: 95vh;
    padding: 2%;
  }
  .mobile-header {
    /* border: dotted 1px red; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .mob-header-left {
    /* border: dotted 3px green; */
    justify-items: start;
  }
  .mob-logo {
    max-width: 40%;
  }
  .mob-header-right {
    display: grid;
    /* border: dotted 3px blue; */
    max-width: 100%;
    justify-self: end;
    /* margin-right: 10%; */
  }
  .mob-header-right-dropdown-outer {
    position: relative;
    display: block;
  }
  .mob-btn {
    color: white;
    font-size: 13px;
    font-weight: 600;
    min-height: 35px;
    min-width: 150px;
    border-radius: 0.25rem;
    display: inline-block;
  }
  .mob-sp {
    min-width: 150px;
  }
  .mob-btn:hover {
    border-color: transparent;
    background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
    background-size: 300% 100%;
    background-position: 50% 0;
    color: #22242f;
    font-weight: 600;
  }
  .mob-header-right-dropdown {
    /* display: none; */
    position: absolute;
    right: 0;
    z-index: 9;
  }
  .btn,
  .btn-blank-sidebar,
  .btn-grey {
    max-height: 35px;
    max-width: 15%;
    align-content: center;
    align-self: center;
    align-items: center;
    margin: 0;
    border: 0;
  }
  .mob-nobull {
    list-style-type: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link media="screen and (max-device-width: 500px)" rel="stylesheet" href="dash.css" />
  <link media="screen and (min-width: 501px) and (max-width: 1024px)" rel="stylesheet" href="dash.css">
  <link rel="stylesheet" href="dash.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="global0.ico" />
  <title>Dashboard</title>
</head>

<body>
  <div class="mobile-header">
    <div class="mob-header-left">
      <img class="mob-logo" src="global1.png" alt="">
    </div>
    <div class="mob-header-right">
      <div class="mob-header-right-dropdown-outer">
        <button class="mob-btn btn-drop-right mob-btn-grey">
            <span>Connect Wallet</span>
          </button>
        <div class="mob-header-right-dropdown">
          <ul class="nobull">
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Metamask</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Wallet Connect</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Binance Wallet</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Trust Wallet</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- MOBILE HEADER ENDS -->
</body>

</html>

如何仅在“连接钱包”内的UL上隐藏和显示？

原文

In the responsive css of my web app, I'm trying to show the ul tag inside the "mobile header" only when clicking the "Connect Wallet" button.

I would like it to show and hide again as soon as clicking anything else.
Is it possible to achieve this without using any JS or Jquery?

Here is my code:

@media screen and (min-width: 501px) and (max-width: 1024px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
    overflow: hidden;
  }
  .mobile-container {
    /* border: dotted 1px yellow; */
    display: grid;
    height: 95vh;
    padding: 2%;
  }
  .mobile-header {
    /* border: dotted 1px red; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .mob-header-left {
    /* border: dotted 3px green; */
    justify-items: start;
  }
  .mob-logo {
    max-width: 40%;
  }
  .mob-header-right {
    display: grid;
    /* border: dotted 3px blue; */
    max-width: 100%;
    justify-self: end;
    /* margin-right: 10%; */
  }
  .mob-header-right-dropdown-outer {
    position: relative;
    display: block;
  }
  .mob-btn {
    color: white;
    font-size: 13px;
    font-weight: 600;
    min-height: 35px;
    min-width: 150px;
    border-radius: 0.25rem;
    display: inline-block;
  }
  .mob-sp {
    min-width: 150px;
  }
  .mob-btn:hover {
    border-color: transparent;
    background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
    background-size: 300% 100%;
    background-position: 50% 0;
    color: #22242f;
    font-weight: 600;
  }
  .mob-header-right-dropdown {
    /* display: none; */
    position: absolute;
    right: 0;
    z-index: 9;
  }
  .btn,
  .btn-blank-sidebar,
  .btn-grey {
    max-height: 35px;
    max-width: 15%;
    align-content: center;
    align-self: center;
    align-items: center;
    margin: 0;
    border: 0;
  }
  .mob-nobull {
    list-style-type: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link media="screen and (max-device-width: 500px)" rel="stylesheet" href="dash.css" />
  <link media="screen and (min-width: 501px) and (max-width: 1024px)" rel="stylesheet" href="dash.css">
  <link rel="stylesheet" href="dash.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="global0.ico" />
  <title>Dashboard</title>
</head>

<body>
  <div class="mobile-header">
    <div class="mob-header-left">
      <img class="mob-logo" src="global1.png" alt="">
    </div>
    <div class="mob-header-right">
      <div class="mob-header-right-dropdown-outer">
        <button class="mob-btn btn-drop-right mob-btn-grey">
            <span>Connect Wallet</span>
          </button>
        <div class="mob-header-right-dropdown">
          <ul class="nobull">
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Metamask</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Wallet Connect</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Binance Wallet</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Trust Wallet</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- MOBILE HEADER ENDS -->
</body>

</html>

How can I hide and show only on click the ul inside the "Connect Wallet"?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴情换悲伤 2025-02-10 04:03:11

是的，您可以做到。也许不是可访问性或触摸屏（需要对其进行测试）的最佳解决方案。但这是可能的。

您要做的是控制按钮焦点功能中的下拉可视性。以及下拉量重点本身的功能，以允许键盘导航。

请参阅下面的片段，我在CSS中进行了两次修改，我通过更改1和更改2来确定。

@media screen and (min-width: 501px) and (max-width: 1024px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
    overflow: hidden;
  }
  .mobile-container {
    /* border: dotted 1px yellow; */
    display: grid;
    height: 95vh;
    padding: 2%;
  }
  .mobile-header {
    /* border: dotted 1px red; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .mob-header-left {
    /* border: dotted 3px green; */
    justify-items: start;
  }
  .mob-logo {
    max-width: 40%;
  }
  .mob-header-right {
    display: grid;
    /* border: dotted 3px blue; */
    max-width: 100%;
    justify-self: end;
    /* margin-right: 10%; */
  }
  .mob-header-right-dropdown-outer {
    position: relative;
    display: block;
  }
  .mob-btn {
    color: white;
    font-size: 13px;
    font-weight: 600;
    min-height: 35px;
    min-width: 150px;
    border-radius: 0.25rem;
    display: inline-block;
  }
  .mob-sp {
    min-width: 150px;
  }
  .mob-btn:hover {
    border-color: transparent;
    background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
    background-size: 300% 100%;
    background-position: 50% 0;
    color: #22242f;
    font-weight: 600;
  }
  .mob-header-right-dropdown {
    /* display: none; */
    /* [CHANGE 1] */
    /* Hidding without display none 
       This way, the solution works also with keyboard (tabbed) navigation */
    opacity: 0;
    width: 0;
    
    position: absolute;
    right: 0;
    z-index: 9;
    
  }
  .btn,
  .btn-blank-sidebar,
  .btn-grey {
    max-height: 35px;
    max-width: 15%;
    align-content: center;
    align-self: center;
    align-items: center;
    margin: 0;
    border: 0;
  }
  .mob-nobull {
    list-style-type: none;
  }
  
  /* [CHANGE 2] */
  /* While button have focus OR focus is inside dropdown */
  .mob-btn:focus + .mob-header-right-dropdown,
  .mob-header-right-dropdown:focus-within {
    opacity: 1;
    width: auto;
  }
  
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link media="screen and (max-device-width: 500px)" rel="stylesheet" href="dash.css" />
  <link media="screen and (min-width: 501px) and (max-width: 1024px)" rel="stylesheet" href="dash.css">
  <link rel="stylesheet" href="dash.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="global0.ico" />
  <title>Dashboard</title>
</head>

<body>
  <div class="mobile-header">
    <div class="mob-header-left">
      <img class="mob-logo" src="global1.png" alt="">
    </div>
    <div class="mob-header-right">
      <div class="mob-header-right-dropdown-outer">
        <button class="mob-btn btn-drop-right mob-btn-grey">
            <span>Connect Wallet</span>
        </button>
        <div class="mob-header-right-dropdown">
          <ul class="nobull">
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Metamask</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Wallet Connect</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Binance Wallet</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Trust Wallet</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- MOBILE HEADER ENDS -->
</body>

</html>

Yes, you can do it. Maybe not the best solution in terms of accessibility, or touch screen (need to test it). But it's possible.

What you have to do is to control the dropdown visibility in function of button focus. And also in funcion of the dropdown focus itself, to permit keyboard navigation.

See the snippet below, I've made two modifications in CSS, I identified by CHANGE 1 and CHANGE 2.

@media screen and (min-width: 501px) and (max-width: 1024px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
    overflow: hidden;
  }
  .mobile-container {
    /* border: dotted 1px yellow; */
    display: grid;
    height: 95vh;
    padding: 2%;
  }
  .mobile-header {
    /* border: dotted 1px red; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .mob-header-left {
    /* border: dotted 3px green; */
    justify-items: start;
  }
  .mob-logo {
    max-width: 40%;
  }
  .mob-header-right {
    display: grid;
    /* border: dotted 3px blue; */
    max-width: 100%;
    justify-self: end;
    /* margin-right: 10%; */
  }
  .mob-header-right-dropdown-outer {
    position: relative;
    display: block;
  }
  .mob-btn {
    color: white;
    font-size: 13px;
    font-weight: 600;
    min-height: 35px;
    min-width: 150px;
    border-radius: 0.25rem;
    display: inline-block;
  }
  .mob-sp {
    min-width: 150px;
  }
  .mob-btn:hover {
    border-color: transparent;
    background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
    background-size: 300% 100%;
    background-position: 50% 0;
    color: #22242f;
    font-weight: 600;
  }
  .mob-header-right-dropdown {
    /* display: none; */
    /* [CHANGE 1] */
    /* Hidding without display none 
       This way, the solution works also with keyboard (tabbed) navigation */
    opacity: 0;
    width: 0;
    
    position: absolute;
    right: 0;
    z-index: 9;
    
  }
  .btn,
  .btn-blank-sidebar,
  .btn-grey {
    max-height: 35px;
    max-width: 15%;
    align-content: center;
    align-self: center;
    align-items: center;
    margin: 0;
    border: 0;
  }
  .mob-nobull {
    list-style-type: none;
  }
  
  /* [CHANGE 2] */
  /* While button have focus OR focus is inside dropdown */
  .mob-btn:focus + .mob-header-right-dropdown,
  .mob-header-right-dropdown:focus-within {
    opacity: 1;
    width: auto;
  }
  
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link media="screen and (max-device-width: 500px)" rel="stylesheet" href="dash.css" />
  <link media="screen and (min-width: 501px) and (max-width: 1024px)" rel="stylesheet" href="dash.css">
  <link rel="stylesheet" href="dash.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="global0.ico" />
  <title>Dashboard</title>
</head>

<body>
  <div class="mobile-header">
    <div class="mob-header-left">
      <img class="mob-logo" src="global1.png" alt="">
    </div>
    <div class="mob-header-right">
      <div class="mob-header-right-dropdown-outer">
        <button class="mob-btn btn-drop-right mob-btn-grey">
            <span>Connect Wallet</span>
        </button>
        <div class="mob-header-right-dropdown">
          <ul class="nobull">
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Metamask</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Wallet Connect</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Binance Wallet</span>
              </a>
            </li>
            <li>
              <a href="#" class="mob-btn btn-grey btn-blank">
                <span class="mob-sp">Trust Wallet</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- MOBILE HEADER ENDS -->
</body>

</html>

回复收藏 0 原文

~没有更多了~