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

Обновить

April 2019

Просмотры

31 раз

1

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

Он работает на всем, кроме IPADS (проверено на Ipad 2 и 3), хром и сафари демонстрируют такое же поведение на нем. Я не думаю, что его проблема двойного щелчка.

Вот это 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

You might not need touchend event listener. Try

$(".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();
});
K K
0

Used the animate function for this issue in the end. It now works on all devices!

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

I should note, the reason why Im using this kind of dropdown is because I couldnt use anything that used display:none or max-height as the dropdowns content was dynamic.

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