Display block not letting me to click on anchor tag-CodePudding

When I click on the anchor tag (inside SubLinklist) again after the first setting display: none and display: block the anchor tag is no longer working. And the anchor tag does not go to that link. I tried but can't figure it out. Eagerly Need Help. Thanks in advance.

HTML

<ul >
    <li  aria-haspopup="true">
        <a href="/pages/collaborations-1" >COLLABORATIONS</a>
        <a href="#hide" id="hide"  tabindex="1">➕</a>
        <a href="#show" id="show"  tabindex="2">➖</a>

        <ul  id="list">
            <li >
                <a href="/pages/collaborations" >ALISA KARIN</a>
            </li>
            <li >
                <a href="/pages/jeffrey-campbell-x-jade-venturi" >JEFFREY CAMPBELL</a>
            </li>
        </ul>
    </li>
    <li >
        <a href="/pages/music" >PLAYLISTS</a>
    </li>
    <li >
        <a href="/blogs/news" >PRESS</a>
    </li>
    <li >
        <a href="https://www.instagram.com/jadeventuri_/" >INSTAGRAM</a>
    </li>
</ul>

CSS

  .SubLinklist {
    list-style: none;
  }
  .Linklist__SubItem {
    padding-top: 10px;
  }
  .hide, .show {
    float: right;
    margin-right: 30px;
  }
  #list, .show, .hide:focus {
    display: none!important;
  }
  .hide:focus   .show,
  .hide:focus ~ #list {
    display: block!important;
    padding-left: 20px;
    padding-bottom: 10px;
  }

.SubLinklist {
        list-style: none;
      }
      .Linklist__SubItem {
        padding-top: 10px;
      }
      .hide, .show {
        float: right;
        margin-right: 30px;
      }
      #list, .show, .hide:focus {
        display: none!important;
      }
      .hide:focus   .show,
      .hide:focus ~ #list {
        display: block!important;
        padding-left: 20px;
        padding-bottom: 10px;
      }

<ul >
        <li  aria-haspopup="true">
            <a href="/pages/collaborations-1" >COLLABORATIONS</a>
            <a href="#hide" id="hide"  tabindex="1">➕</a>
            <a href="#show" id="show"  tabindex="2">➖</a>
    
            <ul  id="list">
                <li >
                    <a href="/pages/collaborations" >ALISA KARIN</a>
                </li>
                <li >
                    <a href="/pages/jeffrey-campbell-x-jade-venturi" >JEFFREY CAMPBELL</a>
                </li>
            </ul>
        </li>
        <li >
            <a href="/pages/music" >PLAYLISTS</a>
        </li>
        <li >
            <a href="/blogs/news" >PRESS</a>
        </li>
        <li >
            <a href="https://www.instagram.com/jadeventuri_/" >INSTAGRAM</a>
        </li>
    </ul>

CodePudding user response：

The problem is that you use the :focus pseudo-class in combination with display: none on the same element. If an element has focus and gets hidden, then it looses the focus again - thus, the selector using :focus does not match anymore.

You could use a hidden checkbox for keeping the expansion state for each node. Then, simply wrap the " " and "-" icons with a label element referencing the checkbox via its for attribute. With the checkout it is possible to use the :checked pseudo-class in combination with the sibling selector ~ to implement the desired behavior.

Possible solution:

.hidden {
  display: none;
}

.SubLinklist {
  list-style: none;
}

.Linklist__SubItem {
  padding-top: 10px;
}

.hide,
.show {
  float: right;
  margin-right: 90px;
}

.SubLinklist {
  display: none;
}

.state-checkbox {
  display: none;
}

.state-checkbox ~ .show {
  display: block;
}

.state-checkbox ~ .hide {
  display: none;
}

.state-checkbox:checked ~ .show {
  display: none;
}

.state-checkbox:checked ~ .hide {
  display: block;
}

.state-checkbox:checked ~ .SubLinklist {
  display: block !important;
}

<ul >
    <li  aria-haspopup="true">
        <a href="/pages/collaborations-1" >COLLABORATIONS</a>
        <input id="cb-show-menu" type="checkbox" >

        <label for="cb-show-menu"  tabindex="1">
          <div tabindex="1">➖</div>
        </label>

        <label for="cb-show-menu"  tabindex="2">
          <div tabindex="2">➕</div>
        </label>            
        
        <ul  id="list">
            <li >
                <a href="/pages/collaborations" >
                  ALISA KARIN
                </a>
            </li>
            <li >
                <a href="/pages/jeffrey-campbell-x-jade-venturi" >
                    JEFFREY CAMPBELL
                </a>
            </li>
        </ul>
    </li>
    <li >
        <a href="/pages/music" >PLAYLISTS</a>
    </li>
    <li >
        <a href="/blogs/news" >PRESS</a>
    </li>
    <li >
        <a href="https://www.instagram.com/jadeventuri_/" >
            INSTAGRAM
        </a>
    </li>
</ul>

CodePudding user response：

Is this your desired result? I removed !important and removed .hide:focus from display: none;. I think the display: none and display: block were sort of clashing into each other.

    .SubLinklist {
     list-style: none;
}
 .Linklist__SubItem {
     padding-top: 10px;
}
 .hide, .show {
     float: right;
     margin-right: 30px;
}
 #list, .show {
     display: none;
}
 .hide:focus   .show, .hide:focus ~ #list {
     display: block;
     padding-left: 20px;
     padding-bottom: 10px;
}

<ul >
   <li  aria-haspopup="true">
      <a href="/pages/collaborations-1" >COLLABORATIONS</a>
      <a href="#hide" id="hide"  tabindex="1">➕</a>
      <a href="#show" id="show"  tabindex="2">➖</a>
      <ul  id="list">
         <li >
            <a href="/pages/collaborations" >ALISA KARIN</a>
         </li>
         <li >
            <a href="/pages/jeffrey-campbell-x-jade-venturi" >JEFFREY CAMPBELL</a>
         </li>
      </ul>
   </li>
   <li >
      <a href="/pages/music" >PLAYLISTS</a>
   </li>
   <li >
      <a href="/blogs/news" >PRESS</a>
   </li>
   <li >
      <a href="https://www.instagram.com/jadeventuri_/" >INSTAGRAM</a>
   </li>
</ul>