帖子浏览定位展开、收起标签js部分思路及代码

界面设计类似于贴吧，前端框架用的是bootstrap，设计思路是在主界面搜索去找到某个主题的社区时，点击弹出模态框，模态框内加载该社区内的帖子和社区内其他功能部分，和贴吧不同的是，贴吧的每一个帖子需要点击进去一个新的页面，在新的页面中完成对这个帖子的查看、回复等功能，我们则是通过bootstrap的折叠插件，就在模态框的社区展示中完成对帖子的查看、回复等。初始布局如1图

整个模态框即为社区内容展示区域，其中右侧为帖子展示区域，用户在浏览帖子简介时，想要再深入了解，就可以点击右下角的展开按钮，此时加载当前帖子的全部信息，同时像评论、回复等功能都在这里完成。于此之外，就算用户没有收起刚才打开的帖子，也不影响用户下拉浏览其它帖子简介。展开图如下

由于模态框能展示的内容有限，除了设置内容滚动外，还需要对过长的帖子增加一个收起的定位标签，方便用户浏览内容。在这里做了两种设计，当打开的帖子高度大于模态框可见高度时，生成定位收起标签，始终固定在界面中部靠左的位置，反之则如上图，将收起标签固定在当前打开帖子的底部（反正也不超过一页）。

这里说一下遇到的问题，首先是生成定位收起标签的问题。

1.如果生成位置统一，需要用到绝对定位position:fixed，而且是相对于当前模态框窗口的，那么如果打开的上一个帖子不收起，下一个帖子展开时，定位标签会覆盖到相同的位置。

2.允许用户展开某个帖子之后，在该帖子未收起的状态下浏览其它帖子，并且也能展开其他帖子，而且定位标签不会冲突，当用户回到某个未收起的帖子区域时，仍然能够收起该帖子。

3.在用户浏览帖子时，有且仅能有一个收起当前浏览内容的标签。

分享一下我的解决思路

1.生成绝对定位标签是肯定的，要解决同时打开多个帖子标签不覆盖的额外难题，我的想法是把jquery的hover事件绑定到每一个展开的帖子上，当帖子展开且用户鼠标在该帖子区域中时，生成仅能关闭该帖子的定位标签，当用户离开该帖子去浏览或者展开其他帖子时，其实就是是用户鼠标离开该帖子时，隐藏该帖子的定位标签。

2.除此之外，增加了对展开帖子高度的判断，如果超出屏幕浏览的最大高度，生成收起标签，反之则将收起标签放置在该帖子底部。

解释一下页面html结构，之后的html代码涉及到遍历元素就不多做解释了

主要在折叠插件触发div和被折叠部分做js处理，这里用到了bootstrap对折叠插件事件，

1.$("折叠部分classname或id标识").shown.bs.collapse(function{//do something});//当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

2.$("折叠部分classname或id标识").hidden.bs.collapse(function{//do something});//当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

对上述事件不了解的同学可看看菜鸟教程里面的讲解，点击我

贴出代码，在代码中做出说明和思路

<script>
var view_height=parseInt($("#postcontainer").css("height"));//获取界面可视高度
//通过折叠组件完全展开时触发事件，能够实现用户浏览时定位标签的生成和用户鼠标停留在那个帖子上，就只显示针对该帖子的定位折叠标签，且同时刻只有一个标签
$('.nextbox').on('shown.bs.collapse', function () {//当某个折叠组件被完全展开时触发$(this).parent().next().html("收起");//根据DOM结构找到属于这个帖子的触发折叠的div，将'展开'替换为'收起',这里的$(this)就是$('.next'),是当前被展开的类名为.nextbox元素var nextinfo=$(this).parent().next();//根据当前被展开div获取它的折叠标签var post_height=parseInt(nextinfo.parent().parent().css("height"));//获取展开后帖子的高度//首先判断帖子高度是否超出窗口高度，超出则加定位标签，反之则不进行折叠标签的样式处理if (post_height>view_height) {//展开帖子超出可视高度，生成定位标签nextinfo.css({"position":"fixed","top":"30%","right":"60%","z-index":"100"});//将折叠触发标签的样式修改，定位到窗口的左侧中部，同时调整元素堆叠顺序z-index，始终显示在最上方$(this).parent().parent().parent().hover(//为当前打开的折叠窗口绑定hover事件，hover函数接受两个方法，分别处理鼠标移入移出操作function (){//第一个方法，移入处理，在帖子左侧显示固定的定位折叠标签nextinfo.show('slow');},function() {//第二个方法，移出处理，隐藏固定的定位折叠标签nextinfo.hide('slow');});console.log('change style');//调试用，不影响运行结果}else{//高度小于可视高度，不改变样式，即不做处理console.log('keep style!');//调试用，不影响运行结果}$("#post-tools").show();
});
//通过折叠组件完全关闭时触发事件，关闭时移除定位标签样式，让其回到初始右下角，同时内容由'收起'变为'展开'，解除当前帖子的hover事件
$('.nextbox').on('hidden.bs.collapse', function () {$(this).parent().next().html("展开...");var nextinfo=$(this).parent().next();//移除浮动nextinfo.removeAttr("style");//因为帖子已经收起，故解绑hover事件$(this).parent().parent().parent().unbind('mouseenter mouseleave');nextinfo.show('slow');
});
</script>

通过对展开帖子绑定hover事件，可以实现用户在不收起上一个帖子的条件下继续展开其它的帖子，只有当用户鼠标重新回到打开的帖子时，对这个帖子的定位标签才会出现，鼠标移出该帖子则这个帖子的定位标签会消失，永远保持用户浏览帖子时有且仅有一个收起当前浏览帖子的定位标签，也避免了冲突，完成了功能的实现。

帖子浏览定位展开、收起标签js部分思路及代码相关推荐

展开收起js动画效果
展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Ad ...
Vue.js实现文字超出指定高度后展开收起功能
参考网站效果爱企查:https://aiqicha.baidu.com/company_detail_28783255028393 天眼查:https://www.tianyancha.com/co ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处. 一.效果图默认为展开状态 --- 左:展开:右:收起二.代码片段: 1.wxml部分 <view c ...
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
最近写了一个筛选功能,要使用手风琴效果展开内容,但是高度不固定,故此添加的动画效果失效,对此有两种解决方案动画失效的原理是: 如果当前设置动画的元素他的父元素高度为auto的时候,且当前元素未设置p ...
echarts tree默认展开_echarts tree控制节点的展开收起
echarts使用版本 v4版本需求当数据量比较大时,tree的子节点会挤在一起,这不是产品想要的效果产品期望点击某一子节点时,其他同级节点自动收起,效果如下 echarts官方文档并没有提供类 ...
收起展开循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
php 收缩栏,HTML5每日一练之details展开收缩标签的应用
HTML5每日一练之details展开收缩标签的应用 details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现. 注:目前仅Chrome支持此标签. detail ...
多行文本展开收起（css）
纯css来实现多行文本展开收起的效果. 1.实现文本超出部分省略单行文本: .text{width: 250px;overflow:hidden;text-overflow: ellipsis;wh ...

帖子浏览定位展开、收起标签js部分思路及代码

帖子浏览定位展开、收起标签js部分思路及代码相关推荐

最新文章

热门文章