- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个容器盒和一个灰色的盒子,它隐藏在右侧。我也有2个按钮。单击其中一个时,灰色框将出现并插入容器框。再次单击此按钮时,灰色框将通过使用 toggleClass
移出舞台,容器框将扩大其宽度。这看起来像是停靠和取消停靠。
这里有一个逻辑:当我单击按钮 1 时,会出现灰色框,其中显示“按钮 1”文本。当灰色框仍在舞台上时,如果我单击按钮 2,“按钮 2”文本将显示在灰色框上并且它仍保留在舞台上。
问题:当我点击按钮 2 时(如上所述),容器应该被灰盒插入,但当灰盒还在舞台上时它就消耗掉了。问题出在这个 JS $('.container').toggleClass('col2 col1');
var $grayBox = $('.gray-box');
$('.clickMe').on('click', function() {
// get text of clicked button and box.
var myText = $(this).text();
var boxText = $grayBox.text();
// "true" if text differs OR box is hidden. otherwise "false".
var state = myText != boxText || $grayBox.not('.dock');
// update the box text and state.
$grayBox.text(myText).toggleClass('dock', state);
$('.container').toggleClass('col2 col1');
})
.gray-box {
position: fixed;
margin-right: -120px;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background-color: gray;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.dock {
margin-right: 0;
}
.container {
border: 1px solid red;
height: 400px;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.col1 {
width: 100%;
}
.col2 {
width: calc(100% - 120px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container col1">
<p>
</p>
<button class='clickMe'>Button 1
</button>
<p></p>
<button class='clickMe'>Button 2</button>
</div>
<div class="gray-box">
My box
</div>
请查看我在 jsfiddle 上的样本
最佳答案
由于对$grayBox
的类操作依赖于state
,它并不总是直接的“切换”。例如,单击一个按钮可能会打开类,但单击另一个按钮并不总是将其关闭。所以 col1 col2
的切换可能会与 $graybox
的状态不同步。
我建议使用state
变量来改变.container
的宽度。此外,我建议不要切换两个类(col1
和 col2
),而是只切换一个覆盖默认样式的类。
下面,我将 .container
的默认宽度设置为 100%
。
切换 col2
类会将宽度更改为 calc(100% - 120px)
。
var $grayBox = $('.gray-box');
var $container = $('.container');
$('.clickMe').on('click', function() {
// get text of clicked button and box.
var myText = $(this).text();
var boxText = $grayBox.text();
// "true" if text differs OR box is hidden. otherwise "false".
var state = myText != boxText || $grayBox.not('.dock');
// update the box text and state.
$grayBox.text(myText).toggleClass('dock', state);
$container.toggleClass('col2', state);
});
.gray-box {
position: fixed;
margin-right: -120px;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background-color: gray;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.dock {
margin-right: 0;
}
.container {
border: 1px solid red;
height: 400px;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
width: 100%;
}
.col2 {
width: calc(100% - 120px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p><button class='clickMe'>Button 1</button></p>
<p><button class='clickMe'>Button 2</button></p>
</div>
<div class="gray-box">My box</div>
这是一个使用 flexbox layout 的实验:
var $sideNav = $('#sideNav');
$('.navToggle').on('click', function() {
// get text of clicked button and box.
var btnText = $(this).text();
var navText = $sideNav.text();
// "true" if text differs OR box is hidden. otherwise "false".
var state = btnText != navText || $sideNav.not('.open');
// update the box text and state.
$sideNav.text(btnText).toggleClass('open', state);
});
#container {
display: flex;
}
#buttons {
border: 1px solid red;
flex: 1 1 0;
}
#sideNav {
height: 100px;
background-color: gray;
transition: all 0.25s ease-in-out 0s;
flex: 0 0 0;
overflow: hidden;
}
#sideNav.open {
flex-basis: 100px;
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="buttons">
<p><button class='navToggle'>Button 1</button></p>
<p><button class='navToggle'>Button 2</button></p>
</div>
<div id="sideNav">My box</div>
</div>
关于jquery - 两个 div 停靠和取消停靠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56192855/
是否可以使用标准输入/标准输出在 bash 中压缩/解压缩字符串? 我试过了,但显然不支持它? hey=$(echo "hello world" | gzip -cf) echo $hey # ret
我的任务是让一个企业网站适用于 IE7,它必须“足够好”,因此我禁用了任何导致问题的花哨/非必要功能。 其中之一是正在使用的搜索栏,需要进行哪些搜索,我猜测幕后某个地方有某种 JavaScript 用
我有一个执行大量处理的小程序。您可以通过按回车键打印进度。 我实现它的方法是在主线程中完成处理,同时我有一个 pthread 不断循环 getchar() 以等待输入键。 问题是当我完成处理时。发生这
我完全理解 suspendCoroutine 与 suspendCancellableCoroutine 在我的示例中的工作方式。但我想知道为什么 println("I finished") (第 1
我是 QT 的新手。目前在我的项目中我实现了 QFileDialog . 在我的用例中:每当用户选择一个文本文件时,它都会执行 functionA .但是,我发现如果在文件对话框中单击取消,funct
我有代码,仅在用户选择“另存为”时运行。为此并获取我正在使用的文件的新名称 Application.GetSaveAsFilename功能。 我遇到的问题是类型不匹配,同时检查用户是否在他没有这样做时
我的 UILocalNotification 有问题。 我正在用我的方法安排通知。 - (void) sendNewNoteLocalReminder:(NSDate *)date alrt:(NS
祝你有美好的一天 我有一个网站,其中有很多“工具提示”。这些工具提示是在将鼠标悬停在文本的特定部分上时创建的。工具提示是一个 div block ,它显示在网站上所有其他内容的顶部,并且当光标从文本移
我遇到以下问题。每隔 2 秒,程序就会进入 if 语句。在这个 if 语句中,我想要一个计时器,它会在 15 秒后给我一条消息。计时器应延迟 1 秒运行。但是当我用计时器“等待”时,if 语句将再执行
基本上我有以下代码片段, (let [task (FutureTask. fn) thr (Thread. task)] (.start thr) ;;wait for signa
取消正在进行的 ASIHttpRequest 请求的正确位置在哪里?这就是我取消的方式,但是当我 时它继续崩溃在不让请求完成的情况下从一个 View Controller 转移到另一个 View Co
我在我的 winforms 应用程序中使用 BackgroundWorker 来执行另一个类中发生的长时间运行的任务(执行数据库操作)。由于所有工作都是在另一个类中完成的,因此取消并不那么简单。我在另
我正在使用 OneSignal 向我的用户显示通知。通知工作正常,但我注意到,如果我在通知栏中“滑动”取消通知,则通知将永远保留,这是一张显示应用程序图标上的通知的图像,我想在应用程序已打开: 我看到
正在运行的 AsyncTask 的 .cancel(boolean) 方法如何工作?这是文档: Attempts to cancel execution of this task. This atte
我注意到,当我激活约束时,我会立即在该行代码处收到一条警告,指出不能同时满足约束。 我假设布局是在“UI 更新周期”之类的稍后时间点计算的,而不是每次约束都被(取消)激活。因此,在(取消)激活约束的代
这是我创建线程的方式: readFromWebThread = [[NSThread alloc] initWithTarget:self selector:@selector(loadThread:
我目前正在尝试取消与我的数据模型中的对象关联的特定 UILocalNotifications。为此,每个数据对象都有一个唯一标识符,即 NSUUID。 创建 UILocalNotification:
当我提交并单击“确定”时,它会继续,但当我按“取消”时,它仍然会提交。我尝试使用此代码,但提交和取消按钮仍然执行相同的操作。 model.saveForm = function() { var
我有一个警报弹出窗口,当发生特定操作时会出现该弹出窗口。 5 秒后,使用 setTimeout() 隐藏警报弹出窗口。 我遇到的问题是,如果我多次触发弹出窗口,有时后续的弹出窗口会出现但立即消失。我相
我有一些 javascipt (jQuery),其中单击按钮时会淡入 #myDiv,然后使用超时函数在 5 秒后再次淡出。它工作正常,但如果用户在超时内的 fadeOut 函数运行之前再次单击该按钮,
我是一名优秀的程序员,十分优秀!