为什么仅在iPad上发生这种情况? jQuery揭示两次发生下拉

时间:2018-11-01 10:48:21

标签: jquery ipad dropdown

我有一个动态下拉菜单,因此高度应与内容匹配并保持响应。

它适用于除iPad(在iPad 2和iPad 3上测试)以外的所有东西,Chrome和Safari表现出相同的行为。我认为这不是双击问题。

Here是解决问题的捷径:

<!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 :(得分:0)

您可能不需要import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueGraph from '../node_modules/vue-graph' import VueMaterial from '../node_modules/vue-material' import 'vue-material/dist/vue-material.min.css' Vue.config.productionTip = false; Vue.use(VueGraph); Vue.use(VueMaterial); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 事件监听器。试试

touchend

答案 1 :(得分:0)

最后针对此问题使用了动画功能。现在,它可以在所有设备上使用!

View on DB Fiddle

我应该注意,我之所以使用这种下拉菜单是因为我无法使用任何使用display:none或max-height的下拉菜单,因为下拉菜单的内容是动态的。

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