如何在单击时删除焦点菜单上的焦点

时间：2018-06-27 10:26:33

标签： javascript jquery html css

我有一个汉堡菜单，当我单击按钮时，它会激活显示菜单上的目标类。打开菜单时，如果再次单击菜单图标，我不确定如何制作菜单，它将折叠菜单。这是我到目前为止获得的代码。

// my attempt in js to blur navTarget:focus
$("nav a").click(function() {
  $("nav a").removeClass("navselected");
  $(this).addClass("navselected");
});

$("#menu").click(function() {
  $("#navTarget:focus").blur();
});
nav {
  flex: 0 0 100%;
  border-right: 1px solid #386BA8;
  background-color: #386BA8;
}

nav header {
  padding: 0rem 1rem;
}

nav a {
  display: block;
  color: #000;
  text-decoration: none;
  padding: 1rem;
  border-top: 1px solid #386BA8;
}

nav a:first-child {
  padding: 0;
  border-top: none;
}

.navigation {
  background-color: #6699CC;
  top: 0rem;
  display: none;
}

.hide {
  display: none;
}

.bufferspace {
  padding: 0;
}

#menu {
  background-color: #6699CC;
  display: block;
  position: fixed;
  cursor: pointer;
  top: 0;
  z-index: 10;
}

#menu i {
  font-size: 2rem;
  padding: 1rem;
}

#navTarget {
  padding-top: 2.8rem;
}

#navTarget:target {
  display: block;
}

nav a:first-child:hover {
  animation: none;
}

nav a:first-child:hover {
  animation: none;
}

.navselected:first-child {
  background-color: none;
  border-left: none;
}


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="navbar">
  <a id="menu" href="#navTarget">
    <i class="fas fa-bars"></i>
  </a>
  <div id="navTarget" class="navigation">
    <header id="main-title">
      <a href="#navbar">
        <h1>HTML<br class="hide" /> Documentation</h1>
      </a>
    </header>
    <a class="nav-link" href="#Introduction">Introduction</a>
    <a class="nav-link" href="#Syntax">Syntax</a>
    <a class="nav-link" href="#HTML_Page">HTML Page</a>
    <a class="nav-link" href="#Common_Tags">Common Tags</a>
    <a class="nav-link" href="#HTML5">HTML5</a>
  </div>
</nav>

Here is the link to my Codepen

3 个答案:

答案 0 :(得分：2)

从菜单按钮中删除href，从CSS中删除:target样式，而是在类更改时添加此样式。

$("#menu").on("click", function() {
  $("#navTarget").toggleClass("openMenu");
});


$("#menu").on("click", function() {
  $("#navTarget").toggleClass("openMenu");
});
$(".nav-link").on("click", function() {
  $("#navTarget").removeClass("openMenu");
});
nav {
  flex: 0 0 100%;
  border-right: 1px solid #386BA8;
  background-color: #386BA8;
}

nav header {
  padding: 0rem 1rem;
}

nav a {
  display: block;
  color: #000;
  text-decoration: none;
  padding: 1rem;
  border-top: 1px solid #386BA8;
}

nav a:first-child {
  padding: 0;
  border-top: none;
}

.navigation {
  background-color: #6699CC;
  top: 0rem;
  display: none;
}

.hide {
  display: none;
}

.bufferspace {
  padding: 0;
}

#menu {
  background-color: #6699CC;
  display: block;
  position: fixed;
  cursor: pointer;
  top: 0;
  z-index: 10;
}

#menu i {
  font-size: 2rem;
  padding: 1rem;
}

#navTarget {
  padding-top: 2.8rem;
}

#navTarget.openMenu {
  display: block;
}

nav a:first-child:hover {
  animation: none;
}

nav a:first-child:hover {
  animation: none;
}

.navselected:first-child {
  background-color: none;
  border-left: none;
}


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
  <a id="menu">
    <i class="fas fa-bars"></i>
  </a>
  <div id="navTarget" class="navigation">

    <header id="main-title">
      <a href="#navbar">
        <h1>HTML<br class="hide" /> Documentation</h1>
      </a>
    </header>
    <a class="nav-link" href="#Introduction">Introduction</a>
    <a class="nav-link" href="#Syntax">Syntax</a>
    <a class="nav-link" href="#HTML_Page">HTML Page</a>
    <a class="nav-link" href="#Common_Tags">Common Tags</a>
    <a class="nav-link" href="#HTML5">HTML5</a>
  </div>
</nav>

答案 1 :(得分：1)

我相信以下解决方案可以解决您的问题。我使用function sortTable(table, column, order) { var asc = order === 'asc'; var tbody = table.find('tbody'); tbody.find('tr').sort(function (a, b) { if (asc) { return parseInt($('td:eq(' + column + ')', a).text())>parseInt($('td:eq(' + column + ')', b).text()); } else { return parseInt($('td:eq(' + column + ')', b).text()) <parseInt($('td:eq(' + column + ')', a).text()); } }).appendTo(tbody); } 切换CSS类，从而使 $scope.add = function(permalink, post_id) { if (typeof(Storage) !== "undefined") { var selectedOption = localStorage.lightbox_list; } else { var selectedOption = null; } $http.get('/wp-admin/admin-ajax.php?action=lightbox_add_talent_ajax&permalink='+permalink+'&list='+selectedOption).success(function(data) { var pop_up_talent = data.attachments; if(pop_up_talent) { var pop_up_talent = $.map(pop_up_talent, function(value, index) { return [value]; }); $scope.lightbox_popup = pop_up_talent.slice(0, 3); } $scope.lightbox = data.attachments; updateBubbleCounter(); loading(data.last_insert, 'add'); }).error(function(){ console.log('unable to add to lightbox list'); }); }; 可见。

        function get_posts($params) {

        $container = $('#container-async');
        $content   = $container.find('.content-ajax');
        $status    = $container.find('.status');

        $status.text('Fetching talent...');

        $.ajax({
                    //url: bobz.ajax_url,
                    url: "/wp-admin/admin-ajax.php",
                    data: {
                        action: 'do_filter_posts',
                    nonce: bobz.nonce,
                    params: $params
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function(data, textStatus, XMLHttpRequest) {

                        if (data.status === 200) {
                            $content.html(data.content);
                        }
                        else if (data.status === 201) {
                            $content.html(data.message);    
                        }
                        else {
                            $status.html(data.message);
                        }

                        script_cycle();
                 },
                 error: function(MLHttpRequest, textStatus, errorThrown) {

                $status.html(textStatus);

                /*console.log(MLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);*/
                 },
            complete: function(data, textStatus) {

                msg = textStatus;

                if (textStatus === 'success') {
                    msg = data.responseJSON.found;
                }

                // $status.text('Posts found: ' + msg);
                $status.text('');

                /*console.log(data);
                console.log(textStatus);*/
            }
        });
    }

$("#navTarget").toggleClass("visible");
navTarget

答案 2 :(得分：0)

嘿，请尝试以下代码，并检查输出是否可以满足您的要求。我使用toggle（）jQuery函数将导航切换为display：block和display：none; 

$("nav a").click(function() {
    $("nav a").removeClass("navselected");
    $(this).addClass("navselected");
});

$("#menu").click(function() {
      // $("#navTarget:focus").blur();
  $(".navigation").toggle();
});
nav{
	flex:0 0 100%;
	border-right:1px solid #386BA8; 
	background-color:#386BA8; 
	}
	nav header{
		padding:0rem 1rem;
	}
nav a{
	display: block;
	color:#000; 
	text-decoration:none;
	padding:1rem;
	border-top:1px solid #386BA8;

}
nav a:first-child{
	padding:0;
	border-top:none;

}

	.navigation{
		background-color:#6699CC;
		top:0rem;

	   display: none;
	}


	.hide{display: none;}
	.bufferspace{padding: 0;}

	#menu{
		background-color:#6699CC;
		
		display: block;
		position:fixed;
		
		cursor:pointer;
		top:0;
		z-index: 10;



	}
	#menu i{
		font-size:2rem;
		padding:1rem;
	}

	#navTarget{
		padding-top:2.8rem;
	}

	nav a:first-child:hover {
		animation:none;
	}
	nav a:first-child:hover {
		animation:none;
	}
	.navselected:first-child{
	background-color:none; 
		border-left:none;
}
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
        <a id="menu" href="#navTarget">
          <i class="fas fa-bars"></i>
        </a>
        <div id="navTarget" class="navigation">

          <header id="main-title"><a href="#navbar"><h1>HTML<br class="hide"/> Documentation</h1></a></header>
          <a class="nav-link" href="#Introduction">Introduction</a>
          <a class="nav-link" href="#Syntax">Syntax</a>
          <a class="nav-link" href="#HTML_Page">HTML Page</a>
          <a class="nav-link" href="#Common_Tags">Common Tags</a>
          <a class="nav-link" href="#HTML5">HTML5</a>
        </div>
    </nav>

相关问题
最新问题