Jquery clicks the link to expand the navigation bar to the appropriate location

desired effect: for example: click on the man, pop up to expand the men"s navigation bar on the right, and how to modify jquery to achieve this function

this is the html section 

<header class="headroom">
    <a id="cd-logo" href="index.html"><img src="img/logo.png" alt="Homepage"></a>

    <a id="cd-menu-trigger" href="-sharp0"><span class="cd-menu-icon"></span></a>
</header>
<main class="cd-main-content">
   <div class="container product-main">
    <div class="row">
        <h2 style="text-align: center;margin-bottom:30px;"></h2>
        <div class="col-md-6 .col-xs-12"><a href="javascript：void(0)"><img src="img/product/man.jpg" class="img-responsive" id="hotimg"><h1 id="hotbutton"> </h1></a></div>
        <div class="col-md-6 .col-xs-12"><a href="javascript：void(0)"><img src="img/product/woman.jpg" class="img-responsive" id="hotimg"><h1 id="hotbutton"> </h1></a></div>
        <div class="col-md-6 .col-xs-12"><a href="javascript：void(0)"><img src="img/product/kid.jpg" class="img-responsive" id="hotimg"><h1 id="hotbutton"> </h1></a></div>
        <div class="col-md-6 .col-xs-12"><a href="javascript：void(0)"><img src="img/product/gear.jpg" class="img-responsive" id="hotimg"><h1 id="hotbutton"> </h1></a></div>
    </div>
</div>
</main> <!-- cd-main-content -->

<nav id="cd-lateral-nav">
    <ul class="cd-navigation">
        <li class="item-has-children">
            <a href="-sharp0"></a>
            <ul class="sub-menu">
                <li class="item-has-children">
                    <a href="-sharp0"></a>
                    <ul class="sub-menu">
                        <li><a href="mxc.html"></a></li>
                        <li><a href="msmc.html"></a></li>
                        <li><a href="mshh.html"></a></li>
                        <li><a href="mwl.html"></a></li>
                        <li><a href="mld.html"></a></li>
                        <li><a href="mzgf.html"></a></li>
                        <li><a href="mlf.html"></a></li>
                        <li><a href="myl.html"></a></li>
                    </ul>
                </li> <!-- item-has-children -->
                <li class="item-has-children">
                    <a href="-sharp0"></a>
                    <ul class="sub-menu">
                        <li><a href="mbg.html"></a></li>
                        <li><a href="mlt.html"></a></li>
                        <li><a href="mft.html"></a></li>
                    </ul>
                </li> <!-- item-has-children -->
                <li class="item-has-children">
                    <a href="-sharp0"></a>
                    <ul class="sub-menu">
                        <li><a href="mfybx.html"></a></li>
                        <li><a href="mfs.html"></a></li>
                        <li><a href="msmy.html"></a></li>
                        <li><a href="myddk.html"></a></li>
                    </ul>
                </li> <!-- item-has-children -->
            </ul>
        </li> <!-- item-has-children -->

        <li class="item-has-children">
            <a href="-sharp0"></a>
            <ul class="sub-menu">
                <li class="item-has-children">
                    <a href="-sharp0"></a>
                    <ul class="sub-menu">
                        <li><a href="wxc.html"></a></li>
                        <li><a href="wsmc.html"></a></li>
                        <li><a href="wshh.html"></a></li>
                        <li><a href="wwl.html"></a></li>
                        <li><a href="wld.html"></a></li>
                        <li><a href="wzgf.html"></a></li>
                        <li><a href="wlf.html"></a></li>  
                    </ul>
                </li> <!-- item-has-children -->
                <li class="item-has-children">
                    <a href="-sharp0"></a>
                    <ul class="sub-menu">
                        <li><a href="wxwy.html"></a></li>
                        <li><a href="wlt.html"></a></li>
                        <li><a href="wft.html"></a></li>
                    </ul>
                </li> <!-- item-has-children -->
                <li class="item-has-children">
                    <a href="-sharp0"></a>
                    <ul class="sub-menu">
                        <li><a href="wfybx.html"></a></li>
                        <li><a href="wfs.html"></a></li>
                        <li><a href="wsmy.html"></a></li>
                        <li><a href="wyddk.html"></a></li>
                    </ul>
                </li> <!-- item-has-children -->
            </ul>
        </li> <!-- item-has-children -->

        <li class="item-has-children" id="kid-nav">
            <a href="-sharp0"></a>
            <ul class="sub-menu">
                <li><a href="klt.html"></a></li>
                <li><a href="kjk.html"></a></li>
            </ul>
        </li> <!-- item-has-children -->

        <li class="item-has-children" id="gear-nav">
            <a href="-sharp0"></a>
            <ul class="sub-menu">
                <li><a href="ptt.html"></a></li>
                <li><a href="pst.html"></a></li>
                <li><a href="pctw.html"></a></li>
                <li><a href="pjw.html"></a></li>
                <li><a href="pxl.html"></a></li>
                <li><a href="ppzsd.html"></a></li>
                <li><a href="pmjd.html"></a></li>
            </ul>
        </li> <!-- item-has-children -->
    </ul> <!-- cd-navigation -->

    <ul class="cd-navigation cd-single-item-wrapper">
        <li><a href="so.html">SAVE OCEAN </a></li>
        <li><a href="st.html"></a></li>
    </ul> <!-- cd-single-item-wrapper -->
</nav>

this is the js section 

jQuery(document).ready(function($){
    var $lateral_menu_trigger = $("-sharpcd-menu-trigger"),
        $content_wrapper = $(".cd-main-content"),
        $navigation = $("header");

    //open-close lateral menu clicking on the menu icon
    $lateral_menu_trigger.on("click", function(event){
        event.preventDefault();
        
        $lateral_menu_trigger.toggleClass("is-clicked");
        $navigation.toggleClass("lateral-menu-is-open");
        $content_wrapper.toggleClass("lateral-menu-is-open").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){
            // firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
            $("body").toggleClass("overflow-hidden");
        });
        $("-sharpcd-lateral-nav").toggleClass("lateral-menu-is-open");
        
        //check if transitions are not supported - i.e. in IE9
        if($("html").hasClass("no-csstransitions")) {
            $("body").toggleClass("overflow-hidden");
        }
    });

    //close lateral menu clicking outside the menu itself
    $content_wrapper.on("click", function(event){
        if( !$(event.target).is("-sharpcd-menu-trigger, -sharpcd-menu-trigger span") ) {
            $lateral_menu_trigger.removeClass("is-clicked");
            $navigation.removeClass("lateral-menu-is-open");
            $content_wrapper.removeClass("lateral-menu-is-open").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(){
                $("body").removeClass("overflow-hidden");
            });
            $("-sharpcd-lateral-nav").removeClass("lateral-menu-is-open");
            //check if transitions are not supported
            if($("html").hasClass("no-csstransitions")) {
                $("body").removeClass("overflow-hidden");
            }

        }
    });

    //open (or close) submenu items in the lateral menu. Close all the other open submenu items.
    $(".item-has-children").children("a").on("click", function(event){
        event.preventDefault();
        $(this).toggleClass("submenu-open").next(".sub-menu").slideToggle(200).end().parent(".item-has-children").siblings(".item-has-children").children("a").removeClass("submenu-open").next(".sub-menu").slideUp(200);
    });
});

this is the css section 

.cd-main-content {
  /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
  min-height: 100%;
  position: relative;
  background-color: white;
  z-index: 2;
  padding-top: 50px;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.cd-main-content.lateral-menu-is-open {
  /* translate to show the lateral menu - all content needs to be put in the .cd-main-content to translate*/
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
@media only screen and (min-width: 768px) {
  .cd-main-content {
    padding-top: 70px;
  }
}

header {
  position: absolute;
  top: 0;
  left: 0;
  height: 75px;
  width: 100%;
  background: -sharp222222;
  z-index: 3;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
header.lateral-menu-is-open {
  /* translate to show the lateral menu */
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
header.is-fixed {
  position: fixed;
}
@media only screen and (min-width: 768px) {
  header {
    height: 75px;
  }
}

-sharpcd-logo {
  display: block;
  float: left;
  margin: 25px 0 0 25px;
}
-sharpcd-logo img {
  display: block;
  height: 20px;
}
@media only screen and (min-width: 768px) {
  -sharpcd-logo {
    margin: 25px 0 0 142px;
  }
}

-sharpcd-top-nav {
  position: absolute;
  top: 0;
  right: 120px;
  height: 100%;
  display: none;
}
-sharpcd-top-nav ul {
  height: 100%;
  padding-top: 18px;
}
-sharpcd-top-nav li {
  display: inline-block;
  margin-right: 1em;
}
-sharpcd-top-nav a {
  display: inline-block;
  padding: .5em;
  color: -sharpFFF;
  text-transform: uppercase;
  font-weight: 600;
}
-sharpcd-top-nav a.current {
  background-color: -sharp242e30;
}
.no-touch -sharpcd-top-nav a:hover {
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 768px) {
  -sharpcd-top-nav {
    display: block;
  }
}

-sharpcd-lateral-nav {
  font-size: 1.2em;
}


-sharpcd-menu-trigger {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
  background-color: -sharp222222;
}
-sharpcd-menu-trigger .cd-menu-text {
  height: 100%;
  text-transform: uppercase;
  color: -sharpFFF;
  font-weight: 600;
  display: none;
}
-sharpcd-menu-trigger .cd-menu-icon {
  /* this span is the central line in the menu menu */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: -sharpFFF;
  /* these are the upper and lower lines in the menu menu */
}
-sharpcd-menu-trigger .cd-menu-icon::before, -sharpcd-menu-trigger .cd-menu-icon:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: inherit;
  left: 0;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
-sharpcd-menu-trigger .cd-menu-icon::before {
  bottom: 5px;
}
-sharpcd-menu-trigger .cd-menu-icon::after {
  top: 5px;
}
-sharpcd-menu-trigger.is-clicked .cd-menu-icon {
  background-color: rgba(255, 255, 255, 0);
}
-sharpcd-menu-trigger.is-clicked .cd-menu-icon::before, -sharpcd-menu-trigger.is-clicked .cd-menu-icon::after {
  background-color: white;
}
-sharpcd-menu-trigger.is-clicked .cd-menu-icon::before {
  bottom: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
-sharpcd-menu-trigger.is-clicked .cd-menu-icon::after {
  top: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media only screen and (min-width: 768px) {
  -sharpcd-menu-trigger {
    width: 110px;
    padding-left: 1.25em;
  }
  -sharpcd-menu-trigger .cd-menu-text {
    display: inline-block;
    line-height: 70px;
  }
  -sharpcd-menu-trigger .cd-menu-icon {
    left: auto;
    right: 1.25em;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

-sharpcd-lateral-nav {
  position: fixed;
  height: 100%;
  right: 0;
  top: 0;
  /* the secondary navigation is covered by the main element */
  z-index: 1;
  width: 260px;
  background-color: -sharp242e30;
  overflow-y: auto;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  /* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateX(80px);
  -moz-transform: translateX(80px);
  -ms-transform: translateX(80px);
  -o-transform: translateX(80px);
  transform: translateX(80px);
}
-sharpcd-lateral-nav .cd-navigation {
  margin: 10px 0 16px;
}
-sharpcd-lateral-nav .sub-menu {
  padding: 0 10px 20px 15px;
  display: none;
}
-sharpcd-lateral-nav a {
  display: block;
  line-height: 4em;
  padding: 0 16px 0 32px;
  color: -sharpaab5b7;
}
-sharpcd-lateral-nav a.current {
  background-color: -sharp3a4a4d;
  color: -sharpFFF;
}
.no-touch -sharpcd-lateral-nav a:hover {
  color: -sharpFFF;
}
@media only screen and (min-width: 768px) {
  -sharpcd-lateral-nav .cd-navigation {
    margin: 20px 0;
  }
}
-sharpcd-lateral-nav.lateral-menu-is-open {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  /* smooth the scrolling on touch devices - webkit browsers */
  -webkit-overflow-scrolling: touch;
}

/* style menu items which have a submenu  */
-sharpcd-lateral-nav .item-has-children > a {
  position: relative;
  text-transform: uppercase;
  font-weight: 600;
  /* this is the right arrow to show that the item has a submenu  */
}
-sharpcd-lateral-nav .item-has-children > a::after {
  content: "";
  display: block;
  height: 11px;
  width: 8px;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 1em;
  background: url("../img/cd-arrow.svg") no-repeat center center;
  background-size: 8px 11px;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
-sharpcd-lateral-nav .item-has-children > a.submenu-open::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}
Html jquery javascript
Mar.21,2021

briefly describe the train of thought
1. Get the four click elements on the left, if links
2. Get the four leading navigation elements on the right, if navItems
2. Traverse, links.eq (i). Click to ask navItems.eq (i) to add an expanded class name

Previous: The problem of invalid style is introduced into the application of Dva construction.

Next: How to configure two packaged react applications on the same domain name and port on nginx?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu