Question

此代码左侧有一个箭头。点击后，#sidebar应与#contact完全一致4em移动到右侧。再次单击时，两个对象都应滑回原始位置。

然而，当点击#contact时，似乎没有任何事情发生，我尝试了几次调试，没有明显的结果。

$(function() {
	var contact = $("#contact");
	var sidebar = $("#sidebar");
	
	if (contact.class = "fa-caret-right") {
		contact.click(function() {
			sidebar.animate({left: "-4em"});
			contact.removeClass("fa-caret-left").addClass("fa-caret-right").css({"padding-left":".2em","padding-right":"0"});
		});
	} else if(contact.class = "fa-caret-left") {
		contact.click(function() {
			sidebar.animate({left: "0"});
			contact.removeClass("fa-caret-right").addClass("fa-caret-left").css({"padding-left":".1em","padding-right":".2em"});
		});
	}
});

@import url(http://fonts.googleapis.com/css?family=Poiret+One|Smythe);

i.tiny{font-size:2em;}
i.small{font-size:3em;}
i.medium{font-size:4em;}
i.large{font-size:5em;}

body {
	margin: 0;
}

header {
	background-color: gray;
	font-family: "Poiret One";
	font-size: 2em;
	padding-top: .3em;
	padding-bottom: .3em;
	text-align: center;
}

main {
	background-color: white;
	height: calc(100vh - 2.6em - 4em);
}

#sidebar {
	position: fixed;
	left: -4em;
	width: 4em;
  top: 50%;
  transform: translateY(-50%);
	background-color: black;
	color: gray;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#sidebar i {
	display: block;
	margin: auto;
	width: 1em;
}

#sidebar i:first-child {
	width: .88em;
	margin-top: 10px;
}

#sidebar i:nth-child(3) {
	width: .88em;
}

#sidebar i:nth-child(4) {
	position: fixed;
	left: 2em;
	top: 50%;
  transform: translateY(-50%);
	background-color: black;
	width: .5em;
	padding-left: .2em;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
}

#sidebar i:last-child {
	margin-bottom: 10px;
}

footer {
	background-color: gray;
	height: 4em;
}

<body>
	<header>
		<div>
			Title
		</div>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
	</header>
	<main>
		<section id="sidebar">
			<i class="fa fa-facebook-official small"></i>
			<i class="fa fa-envelope small"></i>
			<i class="fa fa-skype small"></i>
			<i id="contact" class="fa fa-caret-right tiny"></i>
			<i class="fa fa-tty small"></i>
		</section>
	</main>
	<footer>
	</footer>
</body>

请尝试解决此问题。谢谢！

如果您对此问题有任何问题或意见，请发表评论。请不要回答问题。

Answer 1

您的代码中有许多错误。

contact.class = "fa-caret-right"应该是 contact.hasClass("fa-caret-right")
您正在删除并添加错误的类。
当元素具有时，您在加载时绑定点击事件 class fa-caret-right意味着您的关闭点击永远不会被绑定到元素。

如果您更正了语法错误并在Click事件中移动了if语句，那么您可能会有更多的运气......

＆＃13;

$(function() {
	var contact = $("#contact");
	var sidebar = $("#sidebar");

	contact.click(function() {
		if (contact.hasClass("fa-caret-right")) {
			sidebar.animate({
				left: "0"
			});
			contact.removeClass("fa-caret-right").addClass("fa-caret-left").css({
				"padding-left": ".2em",
				"padding-right": "0"
			});
		} else if (contact.hasClass("fa-caret-left")) {
			sidebar.animate({
				left: "-4em"
			});
			contact.removeClass("fa-caret-left").addClass("fa-caret-right").css({
				"padding-left": ".1em",
				"padding-right": ".2em"
			});
		}
	});

});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Poiret+One|Smythe);

i.tiny{font-size:2em;}
i.small{font-size:3em;}
i.medium{font-size:4em;}
i.large{font-size:5em;}

body {
	margin: 0;
}

header {
	background-color: gray;
	font-family: "Poiret One";
	font-size: 2em;
	padding-top: .3em;
	padding-bottom: .3em;
	text-align: center;
}

main {
	background-color: white;
	height: calc(100vh - 2.6em - 4em);
}

#sidebar {
	position: fixed;
	left: -4em;
	width: 4em;
  top: 50%;
  transform: translateY(-50%);
	background-color: black;
	color: gray;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#sidebar i {
	display: block;
	margin: auto;
	width: 1em;
}

#sidebar i:first-child {
	width: .88em;
	margin-top: 10px;
}

#sidebar i:nth-child(3) {
	width: .88em;
}

#sidebar i:nth-child(4) {
	position: fixed;
	left: 2em;
	top: 50%;
  transform: translateY(-50%);
	background-color: black;
	width: .5em;
	padding-left: .2em;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
}

#sidebar i:last-child {
	margin-bottom: 10px;
}

footer {
	background-color: gray;
	height: 4em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
	<header>
		<div>
			Title
		</div>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
	</header>
	<main>
		<section id="sidebar">
			<i class="fa fa-facebook-official small"></i>
			<i class="fa fa-envelope small"></i>
			<i class="fa fa-skype small"></i>
			<i id="contact" class="fa fa-caret-right tiny"></i>
			<i class="fa fa-tty small"></i>
		</section>
	</main>
	<footer>
	</footer>
</body>

＆＃13;

稍微修改你的css以使用transition，你可以简单地使用代码，你的动画会更顺畅......

#sidebar {
    ...
    transition: all .2s ease;
}

#sidebar.active {
    left: 0;
}

＆＃13;

var contact = $("#contact");
var sidebar = $("#sidebar");

contact.click(function() {
    $(this).toggleClass('fa-caret-right fa-caret-left');
    sidebar.toggleClass('active');
});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Poiret+One|Smythe);

i.tiny{font-size:2em;}
i.small{font-size:3em;}
i.medium{font-size:4em;}
i.large{font-size:5em;}

body {
	margin: 0;
}

header {
	background-color: gray;
	font-family: "Poiret One";
	font-size: 2em;
	padding-top: .3em;
	padding-bottom: .3em;
	text-align: center;
}

main {
	background-color: white;
	height: calc(100vh - 2.6em - 4em);
}

#sidebar {
	position: fixed;
	left: -4em;
	width: 4em;
    top: 50%;
    transform: translateY(-50%);
	background-color: black;
	color: gray;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
    transition: all .2s ease;
}

#sidebar.active {
    left: 0;
}

#sidebar i {
	display: block;
	margin: auto;
	width: 1em;
}

#sidebar i:first-child {
	width: .88em;
	margin-top: 10px;
}

#sidebar i:nth-child(3) {
	width: .88em;
}

#sidebar i:nth-child(4) {
	position: fixed;
	left: 2em;
	top: 50%;
    transform: translateY(-50%);
	background-color: black;
	width: .5em;
	padding-left: .2em;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
}

#sidebar i:last-child {
	margin-bottom: 10px;
}

footer {
	background-color: gray;
	height: 4em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header>
  <div>
    Title
  </div>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
</header>
<main>
  <section id="sidebar">
    <i class="fa fa-facebook-official small"></i>
    <i class="fa fa-envelope small"></i>
    <i class="fa fa-skype small"></i>
    <i id="contact" class="fa fa-caret-right tiny"></i>
    <i class="fa fa-tty small"></i>
  </section>
</main>
<footer>
</footer>

＆＃13;

菜单不会向左滑动

1 个答案: