Jquery移动面板通过bxslider carousal隐藏_Jquery_Html_Jquery Mobile_Twitter Bootstrap 3_Bxslider

Jquery移动面板通过bxslider carousal隐藏

jquery html jquery-mobile twitter-bootstrap-3

Jquery移动面板通过bxslider carousal隐藏,jquery,html,jquery-mobile,twitter-bootstrap-3,bxslider,Jquery,Html,Jquery Mobile,Twitter Bootstrap 3,Bxslider,我在同一页上有bxSlider carousal和jquery移动面板。滑动时，右侧面板打开。在面板内部有一个链接，单击该链接可从窗格中隐藏当前项目添加新项目（全部为静态）我的问题是当面板打开它的时候。但当我在面板内点击链接时，新内容就会出现在面板上方。面板每次都会出现，但第二次会被carousal隐藏这在pc机上是好的，但在移动设备上是唯一的问题谢谢你的帮助代码： Bxxloder和JQM $（document）.bind（“mobileinit”，function（）{ //$.e

我在同一页上有bxSlider carousal和jquery移动面板。滑动时，右侧面板打开。在面板内部有一个链接，单击该链接可从窗格中隐藏当前项目添加新项目（全部为静态）

我的问题是当面板打开它的时候。但当我在面板内点击链接时，新内容就会出现在面板上方。面板每次都会出现，但第二次会被carousal隐藏

这在pc机上是好的，但在移动设备上是唯一的问题

谢谢你的帮助

代码：


Bxxloder和JQM
$（document）.bind（“mobileinit”，function（）{
//$.event.special.swipe.horizontalDistanceThreshold=（screen.availWidth）/60；
$.event.special.swipe.horizontalDistanceThreshold=（screen.availWidth）/100；
//$.event.special.swipe.horizontalDistanceThreshold='30'；//默认值30px
$.event.special.swipe.verticalDistanceThreshold='150'；//默认值75px
});




设置






网络





$（文档）.ready（函数（）{
$（'.bxslider'）.bxslider({
模式：“水平”，
标题：对，
是的，
是的，
没错，
控件：false，
传呼机：错，
速度：200
});
});
$（文档）。在（“页面创建”，函数（）{
$（文档）。在（“滑动”，演示页面），函数（e）{
//我们检查页面上是否没有打开的面板，否则
//滑动关闭左面板也会打开右面板（和v.v.）。
//我们通过检查框架存储在页面元素（panel:open）上的数据来实现这一点。
//如果（$（“.ui页面处于活动状态”）.jqmData（“面板”）！=“打开”）
if（$（“.ui页面处于活动状态”）.jqmData（“面板”）！==“打开”和（&$（e.target）.最近（“.bxslider”）.length==0）{
如果（例如，类型==“刷卡”）{
$（“右面板”）。面板（“打开”）；
}否则如果（例如，类型==“刷卡”）{
$（“左面板”）。面板（“打开”）；
}
}
});
});
$（文档）.ready（函数（）{
$（“#加载”）。在（“单击”，函数（）{
var items=$（“#p2.ui content”）.contents（）；
美元（本）。在（项目）之后；
$（“#menulink1，#menulink2，#menulink3，#load”）.hide（）；
});
});

您的页面结构不正确。你不应该把一个页面文档放在另一个页面文档中，移除内部页面分区。面板不应该被包装在任何其他分区中，但是页面分区，将其移出内容分区。多谢Omar，我在提出问题后发现了问题所在，我没有扭曲页面中的bxslider。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bxxloder and JQM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="bxslider/jquery.bxslider.css">
    <link rel="stylesheet" href="jqm/jquery.mobile-1.4.1.min.css">

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bxslider/jquery.bxslider.js"></script>
    <script>
$(document).bind("mobileinit", function(){
 //$.event.special.swipe.horizontalDistanceThreshold = (screen.availWidth) / 60;
  $.event.special.swipe.horizontalDistanceThreshold = (screen.availWidth) / 100;        
 //$.event.special.swipe.horizontalDistanceThreshold = '30'; // default 30px
 $.event.special.swipe.verticalDistanceThreshold = '150'; // default 75px
});
</script>
    <script src="jqm/jquery.mobile-1.4.1.min.js"></script>



</head>
<body>
<!--#########################JQM#########################-->
<!--<div class="container-fluid">-->
<div data-role="page" id="demo-page" data-theme="b" data-url="demo-page"> <!--start #demo-page-->

    <div data-role="content">


     <!--######################### Panel ##############################-->
    <div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b">
    <div id="panelholder"> <!--start panelholder-->
        <p class="menulink" id="menulink1"><a href="javascript:void(0)" /><img src="images/search.png" alt="search" /><br>Search</a></p>
        <p class="menulink" id="menulink2"><a href="javascript:void(0)" /><img src="images/share.png" alt="Share" /><br>Share</a></p>
        <p class="menulink" id="menulink2"><a href="javascript:void(0)" /><img src="images/start.png" alt="Start" /><br>Start</a></p>
        <p class="menulink-btn"><a href="#" id="load"/><img src="images/settings.png" alt="Settings" /><br>Settings</a></p>
        <!--<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>-->
        </div><!--end panelholder-->
    </div><!--panel -->

<!--Content2 from panel-->
<div data-role="page" id="p2"><!--start #p2-->

    <div role="main" class="ui-content"><!-- start ui-content-->
       <div id="panelholder2"> <!--start #panelholder2-->
        <div style="overflow:hidden;"><img src="images/back.png" alt="back" class="set-img"/><span class="set-align">settings</span></div>
      <div id="list-container">  <!--start list-container-->
      <ul id="panel2-list">
      <li class="p2-list"><a href="#">refer work</a></li>
      <li class="p2-list"><a href="#">potential link 2</a></li>
      <li class="p2-list"><a href="#">potential link 3</a></li>
      <li class="p2-list"><a href="#">potential link 4</a></li>
      </ul>
      </div>  <!--end list-container-->
      <div class="clearfloat"></div>
      <div id="dashboard"><!--start dashboard-->
      <div class="dbimg" id="link1"><a><img src="images/network.png"  alt="network" />network</a></div>

      </div><!--End dashboard-->

       </div> <!--end #panelholder2-->
    </div><!-- end ui-content-->

</div><!--end #p2--> 
</div>





<!--#########################Bx slider#########################-->

<!--<section class="row col-lg-10" style="float: none; margin: 0 auto;">-->

<ul class="bxslider">
  <li><img src="images/banner1.png" title="Funky roots" /></li>
  <li><img src="images/banner1.png" title="The long and winding road" /></li>
  <li><img src="images/banner1.png" title="Happy trees" /></li>
</ul>
<!--</section>  -->            



<!--######################### End Swipe Carousel ##############################-->

<!--</div>-->

<script>
    $(document).ready(function () {

$('.bxslider').bxSlider({
  mode: 'horizontal',
  captions: true,
  auto: true,
  touchEnabled: true,
  oneToOneTouch: true,
  controls: false,
  pager: false,
  speed: 200
});

});

</script>

<script>
$(document).on("pagecreate", function () {
    $(document).on("swipe", "#demo-page", function (e) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        //if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" )
        if ($(".ui-page-active").jqmData("panel") !== "open" &&  $(e.target).closest(".bxslider").length === 0) {
            if (e.type === "swipe") {
                $("#right-panel").panel("open");
            } else if (e.type === "swipe") {
                $("#left-panel").panel("open");
            }
        }

    });
});


</script>

<script>
    $(document).ready(function () {
        $("#load").on("click", function () {
            var items = $("#p2 .ui-content").contents();
            $(this).after(items);
            $("#menulink1, #menulink2, #menulink3, #load").hide();
        });
    });
</script>





               <!--######################### End Swipe Carousel ##############################-->










</body>
</html>