点击阅读器中间部分，导航栏不出现，click点击事件失败，为什么？
来源：
qq_秀线菊_0
2016-05-19
</head>
<body>
<div id="root" class="container">
<div class="m-article-action">
<div class="article-action-mid" id="action_mid"></div>
</div>
<div class="top-nav" id="top-nav" style="display: none">
<div class="icon-back"></div>
<div class="nav_title">返回书架</div>
</div>
<div id="fiction_chapter_title" class="text-title"></div>
<div id="fiction_container" class="m_read_content">
<h4>第一章节</h4>
<p>哦你还问阿牛灰姑娘我已回答不够而欧冠熊我我结构hi欧冠我狗狗哦如此呢 哦济公弄完IE紧凑我无奇偶我解耦v我我讲哦hi奇偶日光奇偶女哦你还问阿牛灰姑娘我已回答不够而欧冠熊我我结构hi欧冠我狗狗哦如此呢 哦济公弄完IE紧凑我无奇偶我解耦v我我讲哦hi奇偶日光奇偶女哦你还问阿牛灰姑娘我已回答不够而欧冠熊我我结构hi欧冠我狗狗哦如此呢 哦济公弄完IE紧凑我无奇偶我解耦v我我讲哦hi奇偶日光奇偶女</p>
<p>哦你还问阿牛灰姑娘我已回答不够而欧冠熊我我结构hi欧冠我狗狗哦如此呢 哦济公弄完IE紧凑我无奇偶我解耦v我我讲哦hi奇偶日光奇偶女哦你还问阿牛灰姑娘我已回答不够而欧冠熊我我结构hi欧冠我狗狗哦如此呢 哦济公弄完IE紧凑我无奇偶我解耦v我我讲哦hi奇偶日光奇偶女哦你还问阿牛灰姑娘我已回答不够而欧冠熊我我结构hi欧冠我狗狗哦如此呢 哦济公弄完IE紧凑我无奇偶我解耦v我我讲哦hi奇偶日光奇偶女</p>
</div>
<div class="m-button-bar">
<ul class="u-tab">
<li id="prev-button">上一章</li>
<li id="next-button">下一章</li>
</ul>
</div>
<div class="nav-pannel-bk font-container" style="display: none"></div>
<div class="nav-pannel font-container" id="font-container" style="display: none">
<div class="child-mod">
<span>字号</span>
<button id="large-font" class="font-size-button">大</button>
<button id="small-font" class="font-size-button">小</button>
</div>
<div class="child-mod">
<span>背景</span>
<div class="bk-container">
<div class="bk-container-current"></div>
</div>
</div>
</div>
<div class="bottom-nav-bk bottom_nav" style="display: none"></div>
<div class="bottom-nav bottom_nav" style="display: none">
<div class="item">
<div id="list" class="navbottom">
<div class="icon-list"></div>
<div class="nav-list">目录</div>
</div>
</div>
<div class="item" id="font-button">
<div id="font class="navbottom">
<div class="icon-font"></div>
<div class="nav-font">字体</div>
</div>
</div>
<div class="item" id="night-button">
<div id="daynight class="navbottom">
<div class="day">
<div class="icon-day"></div>
<div class="nav-day">白天</div>
</div>
<div class="night" style="display: none">
<div class="icon-night"></div>
<div class="nav-night">黑夜</div>
</div>
</div>
</div>
</div>
</div>
<script src="lib/zepto.min.js"></script>
<script>
window.jQuery = $;
</script>
<script src="js/jquery.base64.js"></script>
<script src="js/jquery.jsonp.js"></script>
<script>
(function(){
var Util=(function(){
var prefix='html5_reader_'
var StorageGetter=function(key){
return localStorage.getItem(prefix+key)
}
var StorageSetter=function(key,val){
return localStorage.setItem(prefix+key.val)
}
return{
StorageGetter:StorageGetter,
StorageSetter:StorageSetter
}
})();
function main(){
//入口函数
Eventhanlder();
}
function readmodel(){
//阅读器的数据交互
}
function readerbaseframe(){
//界面设计
}
var Win=$(window)
var Doc=$(document)
var Dom={
top_nav:$('#top-nav'),
bottom_nav:$('.bottom_nav')
}
function Eventhanlder(){
//交互时间绑定
$('#action_mid').click(function(){
if(Dom.top_nav.css('display')=='none'){
Dom.top_nav.show();
Dom.bottom_nav.show();
}else{
Dom.top_nav.hide();
Dom.bottom_nav.hide();
}
})
}
});
</script>
</body>
</html>
1回答
-
远人
2016-05-24
一般来说定位这种类型问题的步骤是：
检查代码是否可以执行到 debugger; $('#action_mid').click()这个事件绑定函数，检查事件是否绑定了
检查是否可以执行到事件函数内部 $('#action_mid').click(function(){ debugger })
检查DOM元素是否获取到了
00
相似问题