Форум

Андрей Розумович · #1 (**permalink**) 19.10.2015, 16:14

Доброго времени суток! Есть такой код

$(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();
    });
});

Можно ли объединить эти три функции в одну??

ksa · #2 (**permalink**) 19.10.2015, 16:21

Сообщение от Андрей Розумович

Можно ли объединить эти три функции в одну?

Просто пользуйся одной, правильно используя селекторы.

http://htmlbook.ru/samcss/gruppirovanie

рони · #3 (**permalink**) 19.10.2015, 16:21

Андрей Розумович,
да

рони · #4 (**permalink**) 19.10.2015, 16:22

Андрей Розумович,
привели бы html c css

Андрей Розумович · #5 (**permalink**) 19.10.2015, 16:42

<!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>

Андрей Розумович · #6 (**permalink**) 19.10.2015, 16:43

там еще к accordion скриптик есть

$('.accordion h2 ').click(function () {
        if ($(this).next().is(':hidden')) {
            $('.accordion h2 ').removeClass('active').next().slideUp();
            $(this).addClass('active').next().slideDown();
		}
		return false;
    });

рони · #7 (**permalink**) 19.10.2015, 17:06

Андрей Розумович,
не осилил ваш макет ... но может чем поможет код

$(function () {
    var x = $('.Home, .About, .Register');
    x.click(function () {
        $('.list').slideDown();
        $(this).addClass('active').next().slideDown();
        x.not($(this)).removeClass('active').next().slideUp();
    });
});

Андрей Розумович · #8 (**permalink**) 19.10.2015, 17:12

Спасибо, болльшое! Чуть не то), но смысл уловил.

Андрей Розумович · #9 (**permalink**) 20.10.2015, 12:12

рони, Не могу разобраться(( Как сделать чтоб .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();
        });
    });

рони · #10 (**permalink**) 20.10.2015, 12:36

Андрей Розумович,
не вижу я никаких $('.accordion h2').next() в вашем коде

Форум

Справочник

Discord чат

Курсы javascript