小编Eva*_*nss的帖子

我有动态内容和响应式布局,因此项目数和可用宽度会有所不同.有时,div中的元素需要包裹在第二个"行"上.

使用flexbox(或任何其他CSS方法),您可以使每行上的项目数相等吗？

<div class="cont">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>

.cont {
  display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

  border: 1px solid grey;
  margin: auto;
  width: 60%;
  padding: 10px;
}
.elem {
  height: 100px;
  width: 100px;
  border: 1px solid blue;

  display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

  margin-right: 10px;
  margin-bottom: 10px;
}

http://codepen.io/anon/pen/qEQzqY

当其容器具有flex的显示时,将元素设置为flex:50%和宽度:50%之间的区别是什么.结果似乎是一样的:

ul {
  display: flex;
  flex-flow: row wrap;
}

.table a {
  flex: 50%;
  background: grey;
}

.table2 a {
  width: 50%;
  background: grey;
}

<ul class="table">
  <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a>
  <a href="#">b</a>
  <a href="#">c</a>
  <a href="#">d</a>
</ul>

<ul class="table2">
  <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a>
  <a href="#">b</a>
  <a href="#">c</a>
  <a href="#">d</a>
</ul>

http://codepen.io/anon/pen/KAbof

无论如何用css更改文本输入的值(显示的默认文本)？

我正在为一个移动网站进行优化,我希望将"搜索此网站"的文本缩短为"搜索".谢谢

getBoundingClientRect().top和offsetTop有什么区别？

https://codepen.io/anon/pen/bWZWQg

const elem = document.querySelector('#find');

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);

console.log('offsetTop: ' + elem.offsetTop);

// Stuff to push the div down the page
<div id='find'>Find me</div>

从我的快速测试中,唯一的区别似乎是返回的小数位数.

我正在使用getByTestIdReact Testing库中的函数：

const button = wrapper.getByTestId("button");
expect(heading.textContent).toBe("something");

是否可以/建议搜索HTML元素？所以像这样：

const button = wrapper.getByHTML("button");
const heading = wrapper.getByHTML("h1");

这是我的网站:http: //smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

它在firefox,chrome,safari和ie9上运行良好,但在IE8和7中混乱.

当您单击图像时,它会展开.当您单击另一个图像时,任何展开的图像都会收缩.我认为这是jQuery的第二部分导致问题.使用IE8和7,动画最终会在正确的位置,但所有图像都会在此之前跳转.

这是代码:

    $(".image-div").click(function () {


        var divRefTwo = $(".image-div").not(this);
        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        if ($(this).css('z-index') == 1) {
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px',
                left: '-125px',
                marginRight: '-250px',
                backgroundPosition: '0px'
            }, 500, function() {
                //
            });
        }
        else {
            var divRef = this;
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 500, function() {
                $(divRef).css('z-index','1');
            });
        }

    });

有没有人有任何想法为什么会这样？它很难调试,因为问题只在动画运行时出现.

谢谢

UPDATE-我尝试添加条件语句只在必要时运行动画(缩小扩展元素),但是这样就根本不运行:

        if ($(".image-div").not(this).css('width') == …

我正在制作一个带有文本输入的移动优化网站,可以在您键入时过滤列表.它类似于:http://jquerymobile.com/test/docs/lists/lists-search.html

对于手机,如果您选择输入页面向下滚动以便输入位于页面顶部,那么这将是一种可用性优势.这样,下面列表中的大部分内容都会在您输入时显示.这有可能和/或有没有人有这方面的经验？谢谢

当您单击某个链接时,我使用以下内容滚动到页面顶部.

$('.myLinkToTop').click(function () {
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

我想创建另一个滚动到页面底部的链接.以下工作正常.我认为它试图在页面上滚动1000px,所以如果页面较短,那么它滚动得比它应该更快,如果页面更高,那么它不会一直到底部.如何用窗户高度替换"1000"？谢谢

$('.myMenuLink').click(function () {
    $('html, body').animate({scrollTop:1000}, 'slow');
    return false;
});

我知道这段代码会跳转到页面的底部,但它会像我需要的那样顺利滚动:

$(document).scrollTop($(document).height());

如何使用jQuery跳转到页面底部？

我不想要一个更平滑的动画,只是为了'跳'.我发现这个网站上的所有其他问题似乎都涉及动画.

我有一些正在进行的测试，这是按预期工作的：

describe('Parent', () => {
    afterEach(() => {
        cleanup();
        jest.resetModules();
    });

    describe('Test 1', () => {
        const wrapper = render(
            <MockProvider>
                <MyComponent />
            </MockProvider>,
        );

        test('1 ', () => {
            expect(wrapper.baseElement).toMatchSnapshot();
            expect(wrapper.getByText('Apply').disabled).toBe(true);
        });
    });

    describe('Test 2', () => {
        test('1 ', () => {
            const wrapper = render(
                <MockProvider>
                    <MyComponent />
                </MockProvider>,
            );
            console.log(wrapper.getByText('Apply').disabled);
            expect(1).toBe(1);
        });
    });
});

但是，当我将第二个渲染函数移出测试时，它会出错：

describe('Parent', () => {
    afterEach(() => {
        cleanup();
        jest.resetModules();
    });

    describe('Test 1', () => {
        const wrapper = render(
            <MockProvider>
                <MyComponent …