Как объединить 3 функции в одну?
Доброго времени суток! Есть такой код
$(document).ready(function () {
$('.Home').click(function () {
$('.list').slideDown();
$('.Home').addClass('active').next().slideDown();
$('.About').removeClass('active').next().slideUp();
$('.Register').removeClass('active').next().slideUp();
});
$('.Register').click(function () {
$('.list').slideUp();
$('.Register').addClass('active').next().slideDown();
$('.Home').removeClass('active').next().slideUp();
$('.About').removeClass('active').next().slideUp();
});
$('.About').click(function () {
$('.list').slideUp();
$('.About').addClass('active').next().slideDown();
$('.Home').removeClass('active').next().slideUp();
$('.Register').removeClass('active').next().slideUp();
});
});
Можно ли объединить эти три функции в одну?? |
Цитата:
http://htmlbook.ru/samcss/gruppirovanie |
Андрей Розумович,
да |
Андрей Розумович,
привели бы html c css |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Task-test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style2.css">
<script src="js/script2.js"></script>
<script src="js/validate2.js"></script>
</head>
<body>
<div class="page">
<div class="navigation">
<ul>
<li class="menu-nav">
<a class="Home a-nav active"> Home </a>
<div>
<ul class="list open">
<li class="submenu active" onclick="slider.first();">
Show slide 1
</li>
<li class="submenu" onclick="slider.second();">
Show slide 2
</li>
<li class="submenu" onclick="slider.third();">
Show slide 3
</li>
</ul>
</div>
</li>
<li class="menu-nav">
<a class="Register a-nav"> Register </a>
</li>
<li class="menu-nav">
<a class="About a-nav"> About </a>
</li>
</ul>
</div>
<div class="accordion">
<section id="one">
<h2 class="active Home"><a href="#one">Home</a></h2>
</section>
<section id="two">
<h2 class="Register"><a href="#two">Register</a></h2>
</section>
<section id="three">
<h2 class="About"><a href="#three">About</a></h2>
</section>
</div>
</div>
</body>
</html>
<style>
/*navigation*/
.navigation {
color: black;
width: 270px;
position: relative;
margin-top: 40px;
margin-bottom: 85px;
font-size: 0.9em;
}
.menu-nav {
padding: 0 5px 0 5px;
float: left;
font-family:sans-serif;
cursor: pointer;
position: relative;
}
.a-nav {
padding: 0 10px;
}
.list {
position: absolute;
width: 105px;
display: none;
}
.submenu {
text-transform: none;
line-height: 25px;
padding-left: 6px;
}
.submenu.active {
background: #b0c4de;
}
/*accordion*/
section {
display: block;
}
h2 {
display: block;
margin: 0;
background-color: aliceblue;
border: 1px solid #aaaaaa;
-o-border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.active {
background-color: #b0c4de;
}
.accordion {
background-color: #eee;
border: 1px solid #ccc;
width: 1280px;
padding: 10px;
margin: 50px auto;
-moz-box-shadow: 0 1px 0 #999;
-webkit-box-shadow: 0 1px 0 #999;
box-shadow: 0 1px 0 #999;
}
.accordion section {
border-bottom: 1px solid #aaaaaa;
background-color: #fff;
-o-border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans', Arial, Helvetica;
padding: 5px 10px;
}
.accordion h2.active a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.content {
border: 1px solid #aaaaaa;
}
.open {
display: block;
}
.close {
display: none;
}
</style>
|
там еще к accordion скриптик есть
$('.accordion h2 ').click(function () {
if ($(this).next().is(':hidden')) {
$('.accordion h2 ').removeClass('active').next().slideUp();
$(this).addClass('active').next().slideDown();
}
return false;
});
|
Андрей Розумович,
не осилил ваш макет ... но может чем поможет код $(function () {
var x = $('.Home, .About, .Register');
x.click(function () {
$('.list').slideDown();
$(this).addClass('active').next().slideDown();
x.not($(this)).removeClass('active').next().slideUp();
});
});
|
Спасибо, болльшое! Чуть не то), но смысл уловил.
|
рони, Не могу разобраться(( Как сделать чтоб .accordion h2 и .a-nav параллельно работали, а не отдельно. Даже если общие селекты прописать, все равно не работает.
$(function () {
var x = $('.accordion h2, .a-nav');
x.click(function () {
$(this).addClass('active').next().slideDown();
x.not($(this)).removeClass('active').next().slideUp();
});
});
|
Андрей Розумович,
не вижу я никаких $('.accordion h2').next() в вашем коде |
| Часовой пояс GMT +3, время: 19:55. |