Вложенный контент div не активен, т.е. - PullRequest
0 голосов
/ 07 декабря 2011

Таким образом, у меня есть «meganav» на моем сайте, который по сути является боковой навигацией в области, который перемещается влево и занимает 3-ю часть сайта, а затем, когда щелкает родительский якорь, он открывает дочерний элемент div.с классом 'meganav-div', который открывается справа и занимает другие 2/3 области обёртки, появляющейся над всем, что находится в этой области.

В настоящее время у меня все это работает во всехбраузеры, кроме ie6 и ie7, где вы можете открыть первый элемент (div # one) и щелкнуть по нему все отлично, однако все, что находится под ним (div # two, div # three и т. д.), не работает, так как любые ссылки внутриэти дивы не кликабельны.У меня есть кнопка закрытия в каждом div, которая работает во всех браузерах, но не в ie6 и 7. Курсор даже меняется на указатель на все якоря, но просто не щелкает.Я предполагаю, что это как-то связано с z-index из-за того, что сначала работал первый, а затем не тот, что дальше по навигационному списку, но я добавил один и тот же z-index для всех .meganav-div и все еще не радуюсь.

Пожалуйста, найдите код ниже.Любая помощь приветствуется.Благодарю.Пожалуйста, найдите ссылку на jsfiddle: http://jsfiddle.net/tomiswoot/vqJnY/1/

       <section id="herocontainer">
            <div class="hero-white">

                <aside>
                    <ul id="mainnav">
                            <a href="#">Nav item 1</a>
                            <!--===MEGANAV one====-----> 
                                <div id="one" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 2</a>
                            <!--===MEGANAV two====-----> 
                                <div id="two" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 3</a>
                            <!--===MEGANAV three====-----> 
                                <div id="three" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 4</a>
                            <!--===MEGANAV four====-----> 
                                <div id="four" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 5</a>
                            <!--===MEGANAV five====-----> 
                                <div id="five" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                    </ul>
                </aside>

            </div>
        </section>

1 Ответ

1 голос
/ 07 декабря 2011

Это связано с тем, что у вас есть несколько кнопок закрытия с одинаковым id = close1 - что делает ваш HTML недействительным. Я изменил его на class = close1, теперь он, кажется, работает (я также немного изменил позиционирование для более простого тестирования)

http://jsfiddle.net/vqJnY/7/

...