关于 javascript:change overflow of materializeCSS card-reveal on click a element contains inside the card

change overflow of materializeCSS card-reveal on clicking an element contained within the card

我想在卡片标题内有一个下拉按钮，点击后应显示如下选项的下拉菜单：

image of card-reveal with list

我知道这可以通过将卡的溢出设置为overflow: visible !important来完成。但这会导致点击时显示卡片的动画效果不佳。你可以在这里查看动画：https://jsfiddle.net/506ubrxh/2/

我希望卡片显示的显示动画正常动画如下：https://jsfiddle.net/su23or05/

所以我想在单击列表图标时动态更改卡片的溢出属性，以便在用户单击列表按钮时更改为 overflow: visible !important 并在用户关闭下拉列表时恢复为 overflow: hidden。我已经编写了 jQuery 来执行此操作，但代码似乎不起作用。下面是我的 html、css 和 jquery 代码。

html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<img class="activator" src="http://materializecss.com/images/office.jpg">

Card Title
list

Card Titleclose
Here is some more information about this product that is only revealed once clicked on.

<ul id=‘dropdown1’ class=‘dropdown-content’>

<li>
one
</li>

<li>
three
</li>

</ul>

css代码：

1
2
3
4

.card {
width: 60%;
overflow: visible !important;
}

jQuery 代码：

1
2
3
4
5
6

$(document).ready(function(){
$(‘.listExpand’).click(function(){
if($(this).hasClass(‘active’))
$(‘.card’).css("overflow","visible !important");
});
});

JSFiddle 链接：https://jsfiddle.net/506ubrxh/2/

如果有人可以提供帮助，那就太棒了！

虽然像 Twitter Bootstrap 和 Zurb Foundation 这样的 CSS 框架为其组件提供 API，但遗憾的是，MaterializeCSS 框架大多缺乏公共 API 来为组件设置自定义事件处理程序，尤其是下拉菜单。

因此我们必须手动设置处理程序，直到它们提供 API – 示例如下：

1
2
3

.card—visible–overflow {
overflow: visible !important;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(document)
// remove the visibility class from all cards
// if the target of the click event is not a dropdown button
.on(‘click’, function(e) {
if (! $(e.target).hasClass(‘dropdown-button’)) {
$(‘.card’).removeClass(‘card–visible-overflow’);
}
})

// add the visibility class to the closest card
// by clicking on each dropdown button inside the card
.on(‘click’, ‘.card .dropdown-button’, function() {
var $card = $(this).closest(‘.card’),
openedClass = ‘card–visible-overflow’,
dropDownIsOpened = $card.hasClass(openedClass);

if (! dropDownIsOpened) {
$card.addClass(openedClass);
}
});

惊人的！谢谢，这就像一个魅力，可惜这么漂亮的框架没有用于此的 API。
还有一件事@Hashem Qolami，如果我有不止一张相同类型的卡片并排使用 display: inline-block 作为卡片，每当我单击该卡片的列表按钮时，我关注的卡片或其他卡片(取决于浏览器宽度)向下滑动一点，但如果我没有并排放置卡片，卡片会保持在正确的位置。这是为什么？这是查看此问题的链接：jsfiddle.net/2tdnztv2
@hulkinBrain 好问题！ TL:DR：将 vertical-align: top 添加到 .card 可以解决问题。长答案：包括 inline-block 在内的内联级元素放置在其基线上，默认情况下与其父级的基线对齐。使用 visible 以外的值设置 overflow 会更改内联级别元素的基线，在这种情况下，基线将是元素的下边距边缘……
@hulkinBrain 在这种特殊情况下，3 个内联级别框——卡片——首先具有 overflow: hidden (在单击任何下拉菜单之前)，它们的基线是它们的底部边缘。单击我们将父卡片 overflow 设置为 visible 的下拉菜单后，卡片的基线将重新设置为默认值，即父元素的基线。这就是打开下拉菜单时框未对齐的原因。
@hulkinBrain 另请注意，由于源代码中 HTML 元素之间的空格、制表符或换行符，内联级元素之间存在空格。看看：stackoverflow.com/questions/5078239/
很棒的解释@Hashem Qolani！我已经监视了每张卡的位置变化，但没有一个明确出现在控制台中。你的解释帮助我理解了这个问题。不过，我有一个疑问，基线设置的依据是什么？隐藏下拉菜单的高度？(我不这么认为，因为隐藏下拉菜单的高度大于单击下拉按钮后创建的空间)我什至尝试增加和减少列表项但添加的空间(哪个导致错位)保持不变。
@hulkinBrain 用文字来解释有点挑战性：)所以我最终得到了这张图片：i.imgsafe.org/9b31a194ac.png(for inline-blocks)希望它有意义。
Qolani 再次，精彩的解释！我完全明白发生了什么！ (我知道感谢帖子是不可取的，但我必须写这个)。感谢您的所有帮助以及在我的问题上花费的所有时间！这张图说得一清二楚！ :D 再次感谢！
@hulkinBrain 我很高兴。我很高兴能帮上忙。顺便说一句，这是哈希姆 :)
是的，对不起，我打错了，当我注意到我拼错了你的名字时，已经过了 5 分钟。 @Hashem Qolami 谢谢！
@hulkinBrain 另请注意，嵌套流内元素的最后一行框被视为内联块元素的基线。 IE。如果是行框，则不考虑绝对定位的下拉菜单。
是的，我早些时候在控制台中研究卡片的元素时注意到了这一点。 @Hashem Qolami 感谢您指出这一点！ :D
更新：修复了损坏的图像 URL：i.stack.imgur.com/d3qsf.png
谢谢@Hashem Qolami！ :D

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/268788.html

关于 javascript:change overflow of materializeCSS card-reveal on click a element contains inside the card

change overflow of materializeCSS card-reveal on clicking an element contained within the card

相关推荐

发表回复