Javascript &引用;阅读更多“;单击按钮时,按钮位置出错。?
我已经实现了一个可折叠的div,它在单击“阅读更多”按钮时展开。很好用。但通过扩大按钮的位置是错误的。我想在同一个位置上的按钮是卡上的按钮时,卡是不扩大 这是我的密码Javascript &引用;阅读更多“;单击按钮时,按钮位置出错。?,javascript,html,css,collapsable,Javascript,Html,Css,Collapsable,我已经实现了一个可折叠的div,它在单击“阅读更多”按钮时展开。很好用。但通过扩大按钮的位置是错误的。我想在同一个位置上的按钮是卡上的按钮时,卡是不扩大 这是我的密码 *{ 字体系列:verdana,无衬线; } #更多{ 显示:无; } .可合作{ 保证金底部:1.2rem 0; 边缘顶端:40px; } 输入[type='checkbox']{ 显示:无; } #myBtn{ 显示:块; 浮动:对; 字体大小:粗体; 字体系列:Verdana,无衬线; 文本转换:大写; 文本对齐:居中;
*{
字体系列:verdana,无衬线;
}
#更多{
显示:无;
}
.可合作{
保证金底部:1.2rem 0;
边缘顶端:40px;
}
输入[type='checkbox']{
显示:无;
}
#myBtn{
显示:块;
浮动:对;
字体大小:粗体;
字体系列:Verdana,无衬线;
文本转换:大写;
文本对齐:居中;
边界:无;
填充:1rem;
大纲:无;
颜色:#A77B0E;
背景#FAE042;
光标:指针;
边界半径:7px;
过渡:所有0.25秒都放松;
}
#myBtn:悬停{
颜色:#7C5A0B;
}
/*.lbl切换::之前{
内容:'';
显示:内联块;
边框顶部:5px实心透明;
边框底部:5px实心透明;
左边框:5px纯色;
垂直对齐:中间对齐;
保证金权利:.7rem;
transform:translateY(-2px);
转变:转变。2放松;
} */
.toggle:选中+.lbl toggle::before{
变换:旋转(90度)translateX(-3px);
}
.可折叠内容物{
最大高度:0px;
溢出:隐藏;
过渡:最大高度。25秒缓进缓出;
}
.toggle:选中+.lbl toggle+.可折叠内容{
最大高度:350px;
}
.切换:选中+lbl切换{
边框右下半径:0;
边框左下半径:0;
}
.可折叠内容.内部内容{
背景:rgba(25022466.2);
边框底部:1px实心rgba(25022466.45);
边框左下半径:7px;
边框右下半径:7px;
填充:.5rem1rem;
}
.添加{
字体大小:粗体;
}
.包装纸{
填充:0px 15px 0px 15px;
显示:表格单元格;
}
.盒子{
填充:10px;
盒影:5px4px9px0px#d8d7d7;
边框:1px实心#eeee;
}
.内盒{
宽度:30%;
浮动:左;
显示:表格单元格;
}
.文本框{
字体系列:verdana,无衬线;
利润上限:-16px;
}
.添加文本{
字体大小:粗体;
}
.文本{
颜色:蓝色;
}
.img{
最大宽度:88%;
高度:自动;
}
#条件标记{
显示:无;
}
雪兰莪州佩拉布汉巴生市塔曼潘达玛印达1B区第60号
雪兰莪州佩拉布汉巴生市塔曼潘达玛印达1B区第60号
2层露台房屋
面积:1860/1302平方英尺
保有权:永久保有权
378000令吉
...
2层露台房屋
面积:1860/1302平方英尺
保有权:永久保有权
378000令吉
阅读更多>
函数myFunction(){
var dots=document.getElementById(“dots”);
var moreText=document.getElementById(“更多”);
var btnText=document.getElementById(“myBtn”);
document.getElementById('hideOnClick').innerHTML=“向世界问好”;
document.getElementById('conditional-tag').style.display=“block”;
如果(dots.style.display==“无”){
dots.style.display=“inline”;
btnText.innerHTML=“阅读更多”;
moreText.style.display=“无”;
document.getElementById('hideOnClick').innerHTML=“第60号,雪兰莪州佩拉布汗巴生市塔曼·佩达玛·英达1B号”;
document.getElementById('conditional-tag').style.display=“无”;
}否则{
dots.style.display=“无”;
btnText.innerHTML=“阅读量减少>”;
moreText.style.display=“inline”;
}
}
这里我删除了浮动:右
并添加了位置:相对代码>和设置<代码>右侧:250px代码>
*{
字体系列:verdana,无衬线;
}
#更多{
显示:无;
}
.可合作{
保证金底部:1.2rem 0;
边缘顶端:40px;
}
输入[type='checkbox']{
显示:无;
}
#myBtn{
位置:相对位置;
左:250px;
显示:块;
字体大小:粗体;
字体系列:Verdana,无衬线;
文本转换:大写;
文本对齐:居中;
边界:无;
填充:1rem;
大纲:无;
颜色:#A77B0E;
背景#FAE042;
光标:指针;
边界半径:7px;
过渡:所有0.25秒都放松;
}
#myBtn:悬停{
颜色:#7C5A0B;
}
/*.lbl切换::之前{
内容:'';
显示:内联块;
边框顶部:5px实心透明;
边框底部:5px实心透明;
左边框:5px纯色;
垂直对齐:中间对齐;
保证金权利:.7rem;
transform:translateY(-2px);
转变:转变。2放松;
} */
.toggle:选中+.lbl toggle::before{
变换:旋转(90度)translateX(-3px);
}
.可折叠内容物{
最大高度:0px;
溢出:隐藏;
过渡:最大高度。25秒缓进缓出;
}
.toggle:选中+.lbl toggle+.可折叠内容{
最大高度:350px;
}
.切换:选中+lbl切换{
边框右下半径:0;
边框左下半径:0;
}
.可折叠内容.内部内容{
背景:rgba(25022466.2);
边框底部:1px实心rgba(25022466.45);
边框左下半径:7px;
边框右下半径:7px;
填充:.5rem1rem;
}
.添加{
字体大小:粗体;
}
.包装纸{
填充:0px 15px 0px 15px;
显示:表格单元格;
}
.盒子{
填充:10px;
盒影:5px4px9px0px#d8d7d7;
边框:1px实心#eeee;
}
.内盒{
宽度:30%;
浮动:左;
显示:表格单元格;
}
.文本框{
字体系列:verdana,无衬线;
利润上限:-16px;
}
.添加文本{
字体大小:粗体;
}
.文本{
颜色:蓝色;
}
.img{
最大宽度:88%;
高度:自动;
}
#条件标记{
显示:无;
}
雪兰莪州佩拉布汉巴生市塔曼潘达玛印达1B区第60号
<div>
<div class="inner-box">
<!-- your existing code here -->
</div>
<div class="wrapper">
<!-- your existing code here -->
</div>
</div>