Почему это происходит только на iPad? JQuery раскрыть раскрывающийся список происходит дважды - PullRequest
Новая
       6

Почему это происходит только на iPad? JQuery раскрыть раскрывающийся список происходит дважды

0 голосов
/ 01 ноября 2018

У меня выпадающий список, который является динамическим, поэтому высота должна соответствовать содержимому и оставаться отзывчивой.

Работает на всех, кроме ipads (протестировано на ipad 2 и 3), chrome и safari демонстрируют одинаковое поведение на нем. Я не думаю, что это проблема двойного щелчка.

Здесь - это jfiddle, чтобы увидеть проблему: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
<style>
.toggle_content {   
/*visibility: hidden;*/
height: 0;
overflow: hidden;
-webkit-transition: height 350ms ease-in-out;
-moz-transition: height 350ms ease-in-out;
-o-transition: height 350ms ease-in-out;
transition: height 350ms ease-in-out;
}

.toggle_content.is-visible {
/*visibility:visible;*/
height: auto;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$.fn.showMe = function() {
//$(this).css("background-color","red");
var $el = $(this);

var getHeight = function () {        
    //$el.css({"visibility": 'visible'}); // Make it visible
    var height = $el.prop('scrollHeight') + 'px'; // Get it's height
    //$el.css({"visibility": ''}); //  Hide it again
    return height;
};

var height = getHeight(); // Get the natural height
$el.addClass('is-visible'); // Make the element visible
$el.css ({"height": height}); // Update the max-height

// Once the transition is complete, remove the inline max-height so the content can scale responsively
setTimeout(function () {
    $el.css ({"height": ''});
}, 350);
return false;
};

$.fn.hideMe = function() {
//$(this).css("background-color","red");
var $el = $(this);
    // Give the element a height to change from
$el.css ({"height": $el.prop('scrollHeight') + 'px'});

// Set the height back to 0
setTimeout(function () {
    $el.css ({"height": '0'});
}, 1);

// When the transition is complete, hide it
setTimeout(function () {
    $el.removeClass('is-visible');
}, 350);
return false;
};
</script>

</head>
<body>

<div class="toggle_dropdown">
<a class="byline" href="javascript:void(0);">Test dropdown</a>
<div class="toggle_content">
<div class="toggle_inner">
    <p>The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. </p>
</div>
</div>
</div>

<script>
// Show / hide dropdown
$(".byline").on("click touchend", function () {
//e.preventDefault();
//e.stopPropagation();
    var $dd = $(this).next('.toggle_content');
    if ($dd.hasClass("is-visible"))
        $dd.hideMe();            
    else
        ($dd.showMe());
        $(".toggle_content").not($dd).hideMe();
});
</script>

</body>
</html>

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Использовал функцию animate для этой проблемы в конце. Теперь он работает на всех устройствах!

https://jsfiddle.net/Bassquake/q2zo6e7b/

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
<style>
.toggle_content {   
height: 0;
overflow: hidden;
background-color:#eee;
}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

</head>

<body>
<div class="toggle_dropdown">
<a class="byline" href="javascript:void(0);">Test dropdown</a>
<div class="toggle_content">
<div class="toggle_inner">
<p>The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. The contents of my div. </p>
</div>
</div>
</div>

<script>
$('.byline').unbind('click touchend').click(function () {
    var $dd = $(this).next('.toggle_content');

    if ($dd.height() == 0) {
        $('.toggle_content').not($dd).animate({
            height: '0px'
        });
        $dd.animate({
            height: $dd.prop('scrollHeight') + 'px'
        }, {
                complete: function () {
                    $dd.css({ "height": 'auto' });
                }
            });
    } else {
        $dd.animate({
            height: '0px'
        });
    }

});
</script>

</body>
</html>
0 голосов
/ 01 ноября 2018

Возможно, вам не нужен touchend прослушиватель событий. Попробуйте 

$(".byline").on("click", function () {
//e.preventDefault();
//e.stopPropagation();
    var $dd = $(this).next('.toggle_content');
    if ($dd.hasClass("is-visible"))
        $dd.hideMe();            
    else
        ($dd.showMe());
        $(".toggle_content").not($dd).hideMe();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...