jQuery Dropdown .slideUp / Down работает на Chrome, ошибки в Firefox

Question

jQuery Dropdown .slideUp / Down работает на Chrome, ошибки в Firefox

0

Прежде всего, я начинаю изучать javascript сейчас, поэтому я знаю, что мой код дерьмо

Но это работало для меня в Chrome! Только когда я попытался просмотреть его в Firefox, он прослушивался

Скрипт: jsfiddle.net/7NCcY/

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
                $(document).ready(function(){
                    /* Dropdown Webmail */
                    $('.button-webmail').click(function() {
                        if($('.toggle-webmail').is(':visible')) {
                            $('.toggle-webmail').slideUp(200);
                        }
                        else {
                            $('.toggle-webmail').slideDown(200);
                            $('.toggle-client-area').slideUp(200);
                            $('.toggle-all-products').slideUp(200);
                            $('.toggle-countries').slideUp(200);
                        }
                    });
                    /* Dropdown Client Area */
                    $('.button-client-area').click(function() {
                        if($('.toggle-client-area').is(':visible')) {
                            $('.toggle-client-area').slideUp(200);
                        }
                        else {
                            $('.toggle-client-area').slideDown(200);
                            $('.toggle-webmail').slideUp(200);
                            $('.toggle-all-products').slideUp(200);
                            $('.toggle-products').slideUp(200);
                        }
                    });
                    /* Dropdown All Products */
                    $('.button-all-products').click(function() {
                        if($('.toggle-all-products').is(':visible')) {
                            $('.toggle-all-products').slideUp(200);
                        }
                        else {
                            $('.toggle-all-products').slideDown(200);
                            $('.toggle-webmail').slideUp(200);
                            $('.toggle-client-area').slideUp(200);
                            $('.toggle-countries').slideUp(200);
                        }
                    });
                    /* Dropdown Countries */
                    $('.button-countries').click(function() {
                        if($('.toggle-countries').is(':visible')) {
                            $('.toggle-countries').slideUp(200);
                        }
                        else {
                            $('.toggle-countries').slideDown(200);
                            $('.toggle-webmail').slideUp(200);
                            $('.toggle-client-area').slideUp(200);
                            $('.toggle-all-products').slideUp(200);
                        }
                    });
                    $('html').click(function() {
                        $('.toggle-webmail, .toggle-client-area, .toggle-all-products, .toggle-countries').slideUp(200);
                    });
                    $('.toggle-webmail, .toggle-client-area, .toggle-all-products, .toggle-countries').click(function(event){
                        event.stopPropagation();
                    });
                });
</script>
<style>
.container {
width:100%;
}
.column1, .column2, .column3, .column4 {
    width:20%;
    margin-right:5%;
    float:left;
}
.toggle-webmail, .toggle-client-area, .toggle-all-products, .toggle-countries {
    display:none;
}
</style>
</head>
<body>
<h1>Click to dropdown</h1>
<h2>Works on Chrome. Bugs on Firefox</h2>
<div class="container">
    <div class="column1">
        <div class="button-webmail">Webmail</div>
        <div class="toggle-webmail"><input type="text"></input></div>
    </div>
    <div class="column2">
        <div class="button-client-area">Client Area</div>
        <div class="toggle-client-area"><input type="text"></input></div>
    </div>
    <div class="column3">
        <div class="button-all-products">All Products</div>
        <div class="toggle-all-products"><input type="text"></input></div>
    </div>
    <div class="column4">
        <div class="button-countries">Countries</div>
        <div class="toggle-countries"><input type="text"></input></div>
    </div>
</div>
</body>
</html>

Lucas Bustamante 03 март 2014, в 00:03

Источник

0

Для начала вы можете значительно сократить свой код, думая немного более модульно. Например, у всех ваших столбцов может быть класс .column а затем вы можете .column их общие .column1 и использовать более конкретный .column1 для стилей, характерных для этого столбца. Таким же образом, вы можете предположить, что все ваши «переключающие» кнопки также разделяют определенные вещи и уменьшают избыточность.
sheriffderek 02 март 2014, в 23:23
0

Кроме того, Firefox очень строг, так что это не ошибка Firefox, это просто не отличный код, как вы сказали.
sheriffderek 02 март 2014, в 23:24
0

Вы также можете разделять классы запятыми вместо повторения. $('.toggle-countries, .other-thing, .other-other-thing').slideDown(200);
sheriffderek 02 март 2014, в 23:58

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

google-chrome

2 ответа

1

Это не совсем то, что вы хотите... но это заставит вас убираться и посылать вас на ваш путь, я надеюсь: скрипка - надеюсь, что это поможет. Правильное таргетирование с помощью CSS очень помогает.

HTML

<div class="column webmail">
    <div class="menu-button">Webmail</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

<div class="column client-area">
    <div class="menu-button">Client Area</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

<div class="column all-products">
    <div class="menu-button">All Products</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

<div class="column countries">
    <div class="menu-button">Countries</div>
    <div class="toggle-field"><input type="text"></input></div>
</div>

CSS

.column {
    width:20%;
    margin-right:5%;
    float:left;
}

.menu-button {
    border: 1px solid red;
    cursor: pointer;
}

.toggle-field {
    border: 1px solid blue;
}

JQuery

// hide all fields

$('.toggle-field').hide();



// webmail "when you click a menu button, find the next .toggle-field and toggle it

$('.menu-button').on("click", function() {

    $(".toggle-field").hide(),
    $(this).next(".toggle-field").slideToggle(100);

});

sheriffderek 02 март 2014, в 22:44

0

(это) относится к тому, с чем происходит событие ... так .menu-button
sheriffderek 02 март 2014, в 23:59

Ещё вопросы

Для начала вы можете значительно сократить свой код, думая немного более модульно. Например, у всех ваших столбцов может быть класс .column а затем вы можете .column их общие .column1 и использовать более конкретный .column1 для стилей, характерных для этого столбца. Таким же образом, вы можете предположить, что все ваши «переключающие» кнопки также разделяют определенные вещи и уменьшают избыточность.
Кроме того, Firefox очень строг, так что это не ошибка Firefox, это просто не отличный код, как вы сказали.
Вы также можете разделять классы запятыми вместо повторения. $('.toggle-countries, .other-thing, .other-other-thing').slideDown(200);
(это) относится к тому, с чем происходит событие ... так .menu-button

Irvin Zhan · Accepted Answer · 2014-03-02T22-43-00.000Z

Всегда проверяйте свою консоль!

Основная проблема заключается в том, как Chrome и Firefox обрабатывают event.stopPropagation(). Как подсказка, когда вы отлаживаете JQuery, одна из первых вещей, которую вы всегда должны делать, это проверить консоль. В вашем JSFiddle, когда вы нажимаете кнопку в Firefox, вы обнаружите, что выходы консоли

ReferenceError: event is not defined

event.stopPropogation() останавливает ваш клик от запуска обработчика onclick для $('html'). Так как Firefox не смог вызвать этот метод, ваш клик взлетел до обработчика onclick для $('html'), который в конечном итоге закрыл выпадающее меню, как только соскользнул.

Чтобы исправить это, вам нужно добавить параметр event в обработчик кликов. Например:

$('.button-webmail').click(function(event) {

    /* handle click */

    event.stopPropagation();
}

JSFiddle Here

Так получилось, что Chrome работает корректно без этого параметра. Надеюсь, это очистит все!

Кроме того, как отметил @sheriffderek, существует много способов очистки этого кода. Вы должны обязательно изучить его идеи!

Именно в этом проблема, я буду следить за консолью, спасибо!