Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2014, 14:25
Аватар для haacki
Интересующийся
Отправить личное сообщение для haacki Посмотреть профиль Найти все сообщения от haacki
 
Регистрация: 05.02.2014
Сообщений: 10

Выделение при клике на элемент
Столкнулся с такой проблемой, пишу меню в стиле аккордеона(с этим проблем нет) и когда я хочу сделать так что бы при клике элемент выделялся, а при клике на следующий элемент предыдущий принимал обычное состояние, а активный становился подсвеченным
Вот мои попытки:
<nav id="accordion">
                <!-- 1 -->
                <h3>
                    <img src="images/less_icon.png" width="35" height="23">
                    <a href="#">Меню 1</a>
                </h3>
                <ul>
                    <li><a href="#">- 1</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 3</a></li>
                    <li><a href="#">- 4</a></li>
                    <li><a href="#">- 5</a></li>
                </ul>

                <!-- 2 -->
                <h3>
                    <img src="images/add_icon.png" width="27" height="26">
                    <a href="#">Меню 2</a>
                </h3>
                <ul>
                    <li><a href="#">- 1</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 3</a></li>
                    <li><a href="#">- 4</a></li>
                    <li><a href="#">- 5</a></li>
                </ul>

                <!-- 3 -->
                <h3>
                    <img src="images/book_icon.png" width="31" height="25">
                    <a href="#">Меню 3</a></h3>
                <ul>
                    <li><a href="#">- 1</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 3</a></li>
                    <li><a href="#">- 4</a></li>
                </ul>

            </nav>

js
$(document).ready(function(){

    //Меню аккордион
    $("#accordion").accordion({
        active: false,
        collapsible: true,
        header: "h3",
        heightStyle: "content"
    });
   //Выбранный пункт аккордиона
    $("#accordion h3").click(function(){
        if($(this).hasClass("bg_menu_active")){
            $(this).removeClass();
        }else{
            $(this).addClass("bg_menu_active");
        }
    });
});

СSS
Код:
/*Классы для jQuery*/
.bg_menu_active{
    background: #56CCC8;
}
/*END*/

#menu{
        width:224px;
    }
        #menu nav h3{
            padding:26px 0 17px 0;
            border-bottom:1px solid #e1e4e6;

        }
        #menu nav h3:hover{
           background: #56CCC8;

        }

        #menu nav h3:first-child{
            border-bottom: 1px solid #e1e4e6;
        }
        #menu nav h3 a{
                display: block;
                cursor: pointer;
                font:16px Roboto,"Segoe ui", Arial, Tahoma, sans-serif;
                color: #4b5156;
                margin:3px 0 0 0;
                text-decoration: none;
            }
        #menu nav h3 img{
            float:left;
            margin:0 15px 0 10px;
        }
        #menu nav ul li:first-child{
            margin:16px 21px 0 21px;
            border-bottom: 1px solid #e0e0e0;
        }
        #menu nav ul li{
            margin:10px 21px 0 21px;
            border-bottom: 1px solid #e0e0e0;
        }
        #menu nav ul li:last-child{
            border-bottom: 0px solid #e0e0e0;
        }
        #menu nav ul li a{
            font:16px Roboto,"Myriad Pro",Tahoma,Arial,"sans-serif";
            color:#4b5156;
            display: block;
            text-decoration: none;
            margin:0 0 0 25px;
            transition: 0.3s margin-left;
        }
        #menu nav ul li a:hover{
            color:#85cbc7;
            margin-left:35px;
        }
В принципе это работает, но когда я перехожу на следующий элемент предыдущий остается тоже подсвечен. Хотелось бы этого избежать, прошу помощи
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2014, 14:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

accordion toggleClass
haacki,
а можно пример целиком делать?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script type='text/javascript' src='https://code.jquery.com/jquery-1.10.2.js'></script>
  <script type='text/javascript' src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style type="text/css">
  /*Классы для jQuery*/
.bg_menu_active{
    background: #56CCC8;
}
/*END*/

#menu{
        width:224px;
    }
        #menu nav h3{
            padding:26px 0 17px 0;
            border-bottom:1px solid #e1e4e6;

        }
        #menu nav h3:hover{
           background: #56CCC8;

        }

        #menu nav h3:first-child{
            border-bottom: 1px solid #e1e4e6;
        }
        #menu nav h3 a{
                display: block;
                cursor: pointer;
                font:16px Roboto,"Segoe ui", Arial, Tahoma, sans-serif;
                color: #4b5156;
                margin:3px 0 0 0;
                text-decoration: none;
            }
        #menu nav h3 img{
            float:left;
            margin:0 15px 0 10px;
        }
        #menu nav ul li:first-child{
            margin:16px 21px 0 21px;
            border-bottom: 1px solid #e0e0e0;
        }
        #menu nav ul li{
            margin:10px 21px 0 21px;
            border-bottom: 1px solid #e0e0e0;
        }
        #menu nav ul li:last-child{
            border-bottom: 0px solid #e0e0e0;
        }
        #menu nav ul li a{
            font:16px Roboto,"Myriad Pro",Tahoma,Arial,"sans-serif";
            color:#4b5156;
            display: block;
            text-decoration: none;
            margin:0 0 0 25px;
            transition: 0.3s margin-left;
        }
        #menu nav ul li a:hover{
            color:#85cbc7;
            margin-left:35px;
        }
  </style>
  <script>
   $(document).ready(function(){

    //Меню аккордион
    $("#accordion").accordion({
        active: false,
        collapsible: true,
        header: "h3",
        heightStyle: "content"
    });
   //Выбранный пункт аккордиона
    var h3 = $("#accordion h3")
    h3.click(function(){
        $(this).toggleClass("bg_menu_active")
        h3.not(this).removeClass("bg_menu_active");
        }
    );
});

  </script>
</head>

<body>
<nav id="accordion">
                <!-- 1 -->
                <h3>
                    <img src="images/less_icon.png" width="35" height="23">
                    <a href="#">Меню 1</a>
                </h3>
                <ul>
                    <li><a href="#">- 1</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 3</a></li>
                    <li><a href="#">- 4</a></li>
                    <li><a href="#">- 5</a></li>
                </ul>

                <!-- 2 -->
                <h3>
                    <img src="images/add_icon.png" width="27" height="26">
                    <a href="#">Меню 2</a>
                </h3>
                <ul>
                    <li><a href="#">- 1</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 3</a></li>
                    <li><a href="#">- 4</a></li>
                    <li><a href="#">- 5</a></li>
                </ul>

                <!-- 3 -->
                <h3>
                    <img src="images/book_icon.png" width="31" height="25">
                    <a href="#">Меню 3</a></h3>
                <ul>
                    <li><a href="#">- 1</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 2</a></li>
                    <li><a href="#">- 3</a></li>
                    <li><a href="#">- 4</a></li>
                </ul>

            </nav>

</body>

</html>

Последний раз редактировалось рони, 28.07.2018 в 18:22.
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2014, 14:56
Аватар для haacki
Интересующийся
Отправить личное сообщение для haacki Посмотреть профиль Найти все сообщения от haacki
 
Регистрация: 05.02.2014
Сообщений: 10

Рони, спасибо большое помогло ! Очень благодарен тебе !
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие при клике по полю в Grid demi ExtJS 1 13.07.2013 14:12
.remove для родителя возникает и при клике на потомка. Как отключить? arachnoz jQuery 3 05.07.2013 17:43
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11
Событие при клике на любой элемент кроме одного shaltay jQuery 1 29.11.2011 19:27
menu с выпадающими подменю при наведении и раздвижное при клике bugor Элементы интерфейса 3 04.10.2010 14:32